<!DOCTYPE html>
<!--	Duet Web Control v1.22.7-diabase

	written by Christian Hammacher

	licensed under the terms of the GPL v2
	see http://www.gnu.org/licenses/gpl-2.0.html
-->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title id="title">Duet Web Control</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--[if IEMobile]><meta http-equiv="cleartype" content="on"><![endif]-->
		<meta name="description" content="Web Interface for Duet Electronics (+ Extension)">
		<meta name="author" content="Christian Hammacher">
		<meta name="MobileOptimized" content="320">
		<meta name="HandheldFriendly" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=480, initial-scale=0.75">

		<!-- Favicon -->
		<link rel="shortcut icon" href="favicon.ico">
		<!-- CSS -->
		<link href="css/animate.css" rel="stylesheet">
		<link href="css/bootstrap.css" rel="stylesheet">
		<link href="css/bootstrap-slider.css" rel="stylesheet">
		<link href="css/defaults.css" rel="stylesheet">
		<link href="css/layout-xs.css" rel="stylesheet">
		<link href="css/layout-sm.css" rel="stylesheet">
		<link href="css/layout-md.css" rel="stylesheet">
		<link href="css/layout-lg.css" rel="stylesheet">
	</head>

	<body>
		<!-- Dynamic sidebar -->
		<nav class="well hidden" id="nav_sidebar">
			<section id="section_actions">
				<h4 class="text-muted">Actions</h4>
				<div class="list-group">
					<a class="list-group-item list-group-item-info btn-connect hidden" href="#"><span class="glyphicon glyphicon-log-in"></span> <span>Connect</span></button>
					<a class="list-group-item list-group-item-danger btn-emergency-stop online-control hidden" href="#"><span class="glyphicon glyphicon-flash"></span> Emergency STOP</a>
				</div>
			</section>

			<section id="section_navigation">
				<h4 class="text-muted">Navigation</h4>
				<div class="list-group">
					<a class="navlink list-group-item active" href="#" data-target="control"><span class="glyphicon glyphicon-home"></span> Machine Control</a>
					<a class="navlink list-group-item" href="#" data-target="job"><span class="glyphicon glyphicon-print"></span> Job Status</a>
				</div>

				<div class="list-group scan-control hidden">
					<a class="navlink list-group-item" href="#" data-target="scanner"><span class="glyphicon glyphicon-facetime-video"></span> 3D Scanner <span class="glyphicon glyphicon-refresh span-refresh-scans hidden"></span></a>
				</div>

				<div class="list-group">
					<a class="navlink list-group-item" href="#" data-target="console"><span class="glyphicon glyphicon-console"></span> G-Code Console</a>
					<a class="navlink list-group-item" href="#" data-target="files"><span class="glyphicon glyphicon-hdd"></span> G-Code Files <span class="glyphicon glyphicon-refresh span-refresh-files hidden"></span></a>
					<a class="navlink list-group-item" href="#" data-target="macros"><span class="glyphicon glyphicon-link"></span> Macros <span class="glyphicon glyphicon-refresh span-refresh-macros hidden"></span></a>
				</div>

				<div class="list-group">
					<a class="navlink list-group-item" href="#" data-target="filaments"><span class="glyphicon glyphicon-cd"></span> Filaments <span class="glyphicon glyphicon-refresh span-refresh-filaments hidden"></span></a>
					<a class="navlink list-group-item diabase hidden" href="#" data-target="calibration"><span class="glyphicon glyphicon-screenshot"></span> Offsets</a>
					<a class="navlink list-group-item" href="#" data-target="settings"><span class="glyphicon glyphicon-cog"></span> Settings</a>
				</div>
			</section>

			<section id="section_app" class="app-control hidden">
				<h4 class="text-muted">App</h4>
				<div class="list-group">
					<a id="a_list_devices" class="list-group-item" href="#"><span class="glyphicon glyphicon-arrow-left"></span> List available Devices</a>
				</div>
			</section>
		</nav>

		<!-- Main Content -->
		<main id="main_content">
			<!-- Navigation Bar -->
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<!-- Machine Name -->
					<div class="navbar-header">
						<a class="navbar-brand hidden-xs" href="#">
							<img alt="logo" class="hidden" src="about:blank">
							<span class="machine-name">Duet Web Control</span>
							<abbr class="hidden home-warning small" title="Some axes are not homed"><span class="glyphicon glyphicon-alert"></span></abbr>
						</a>
					</div>

					<span class="label label-default label-status navbar-left">Disconnected</span>

					<!-- Regular navbar entries -->
					<div id="div_navbar_buttons" class="collapse navbar-collapse navbar-right">
						<div class="btn-group navbar-checkbox navbar-left hidden-md hidden-lg" data-toggle="buttons">
							<button class="btn btn-default btn-hide-info active">
								<span class="glyphicon glyphicon-dashboard"></span>
							</button>
						</div>

						<button type="button" class="btn btn-info btn-connect navbar-btn navbar-left hidden"><span class="glyphicon glyphicon-log-in"></span> <span>Connect</span></button>

						<form class="navbar-form padding-small navbar-left hidden-sm gcode-input" autocomplete="off">
							<div class="input-group">
								<span class="input-group-addon">
									<a href="https://duet3d.dozuki.com/Wiki/Gcode" target="_blank">?</a>
								</span>

								<input type="text" name="gcode" class="form-control typeahead" placeholder="Send G-Code..." data-provide="typeahead" disabled>
								<div class="input-group-btn">
									<button type="submit" class="btn btn-default disabled" title="Send G-Code from input"><span class="glyphicon glyphicon-send"></span> Send</button>
								</div>
							</div>
						</form>

						<button type="button" class="btn btn-default btn-upload navbar-btn navbar-left padding-small hidden-xs hidden-sm disabled" title="Upload &amp; Start one or more G-Code files (drag&amp;drop is supported as well)" data-type="start" data-style="btn-default"><span class="glyphicon glyphicon-cloud-upload"></span> Upload &amp; Start</button>

						<button type="button" class="btn btn-danger btn-emergency-stop navbar-btn navbar-left disabled" title="Enforces an immediate software reset (M112+M999)"><span class="glyphicon glyphicon-flash"></span> Emergency STOP</button>
					</div>

					<!-- Mobile navbar entries -->
					<div class="navbar-header collapsed">
						<button type="button" class="navbar-toggle pull-left" id="btn_toggle_sidebar">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>

						<a class="navbar-brand visible-xs">
							<span class="machine-name">Duet Web Control</span>
							<abbr title="Some axes are not homed" class="hidden home-warning"><span class="glyphicon glyphicon-alert"></span></abbr>
						</a>
					</div>
				</div>
			</nav>

			<!-- Info Panels -->
			<div class="container-fluid" id="div_info_panels">
				<div class="row">
					<!-- Machine Status -->
					<div class="col-xs-12 col-sm-7 col-md-4 col-lg-3" id="div_status">
						<div class="panel panel-default panel-status">
							<div class="panel-heading">
								<span class="glyphicon glyphicon-info-sign"></span>
								<span>Machine Status</span>
								<a href="#" id="a_mode"><span id="span_mode" class="label label-default hidden">Mode: <span>n/a</span></span></a>
							</div>

							<div class="panel-table-container">
								<table class="table table-bordered table-condensed table-centered-cells table-axis-positions table-status diabase hidden">
									<tr>
										<th rowspan="9" class="th-status">Axis Positions</th>
										<th data-axis="0">X</th>
										<td data-axis="0">n/a</td>
									</tr>
									<tr>
										<th data-axis="1">Y</th>
										<td data-axis="1">n/a</td>
									</tr>
									<tr>
										<th data-axis="2">Z</th>
										<td data-axis="2">n/a</td>
									</tr>
									<tr>
										<th data-axis="3">U</th>
										<td data-axis="3">n/a</td>
									</tr>
									<tr>
										<th class="hidden" data-axis="4">V</th>
										<td class="hidden" data-axis="4">n/a</td>
									</tr>
									<tr>
										<th class="hidden" data-axis="5">W</th>
										<td class="hidden" data-axis="5">n/a</td>
									</tr>
									<tr>
										<th class="hidden" data-axis="6">A</th>
										<td class="hidden" data-axis="6">n/a</td>
									</tr>
									<tr>
										<th class="hidden" data-axis="7">B</th>
										<td class="hidden" data-axis="7">n/a</td>
									</tr>
									<tr>
										<th class="hidden" data-axis="8">C</th>
										<td class="hidden" data-axis="8">n/a</td>
									</tr>
								</table>

								<table class="table table-bordered table-condensed table-centered-cells table-axis-positions table-status no-diabase">
									<tr>
										<th rowspan="2" class="th-status">Head Position</th>
										<th data-axis="0">X</th>
										<th data-axis="1">Y</th>
										<th data-axis="2">Z</th>
										<th class="hidden" data-axis="3">U</th>
										<th class="hidden" data-axis="4">V</th>
										<th class="hidden" data-axis="5">W</th>
										<th class="hidden hidden-md hidden-xs" data-axis="6">A</th>
										<th class="hidden hidden-md hidden-xs" data-axis="7">B</th>
										<th class="hidden hidden-md hidden-xs" data-axis="8">C</th>
									</tr>
									<tr>
										<td data-axis="0">n/a</td>
										<td data-axis="1">n/a</td>
										<td data-axis="2">n/a</td>
										<td class="hidden" data-axis="3">n/a</td>
										<td class="hidden" data-axis="4">n/a</td>
										<td class="hidden" data-axis="5">n/a</td>
										<td class="hidden hidden-md hidden-xs" data-axis="6">n/a</td>
										<td class="hidden hidden-md hidden-xs" data-axis="7">n/a</td>
										<td class="hidden hidden-md hidden-xs" data-axis="8">n/a</td>
									</tr>
								</table>

								<table id="table_extruder_positions" class="table table-bordered table-condensed table-centered-cells table-status no-diabase">
									<tr>
										<th id="th_extruder_drives" rowspan="2" class="th-status">Extruder Drives</th>
										<th class="hidden"><!-- only for HTML validation --></th>
										<th class="hidden-md" data-extruder="0">Drive 0</th>
										<th class="hidden-md" data-extruder="1">Drive 1</th>
										<th class="hidden-md hidden" data-extruder="2">Drive 2</th>
										<th class="hidden-md hidden" data-extruder="3">Drive 3</th>
										<th class="hidden-md hidden" data-extruder="4">Drive 4</th>
										<th class="hidden-md hidden" data-extruder="5">Drive 5</th>
										<th class="hidden-md hidden" data-extruder="6">Drive 6</th>
										<th class="hidden-md hidden" data-extruder="7">Drive 7</th>
										<th class="hidden-md hidden" data-extruder="8">Drive 8</th>
									</tr>
									<tr>
										<td class="hidden-xs hidden-sm hidden-md hidden-lg" data-extruder="total">n/a</td>
										<td class="hidden-md" data-extruder="0">n/a</td>
										<td class="hidden-md" data-extruder="1">n/a</td>
										<td class="hidden-md hidden" data-extruder="2">n/a</td>
										<td class="hidden-md hidden" data-extruder="3">n/a</td>
										<td class="hidden-md hidden" data-extruder="4">n/a</td>
										<td class="hidden-md hidden" data-extruder="5">n/a</td>
										<td class="hidden-md hidden" data-extruder="6">n/a</td>
										<td class="hidden-md hidden" data-extruder="7">n/a</td>
										<td class="hidden-md hidden" data-extruder="8">n/a</td>
									</tr>
								</table>

								<table class="table table-bordered table-condensed table-centered-cells table-status speeds hidden">
									<tr>
										<th rowspan="2" class="th-status">Speeds</th>
										<th>Requested Speed</th>
										<th>Top Speed</th>
									</tr>
									<tr>
										<td class="req-speed" title="Requested speed of the current move">n/a</td>
										<td class="top-speed" title="Top speed of the current move">n/a</td>
									</tr>
								</table>

								<table class="table table-bordered table-condensed table-centered-cells table-status">
									<tr>
										<th rowspan="2" class="th-status">Sensors</th>
										<th class="vin hidden" title="Input voltage of your board">Vin</th>
										<th class="mcutemp hidden hidden-sm">MCU Temp.</th>
										<th id="th_probe" class="no-diabase">Z-Probe</th>
										<th class="fan-rpm hidden">Fan RPM</th>
									</tr>
									<tr>
										<td id="td_vin" class="vin hidden" title="Power supply voltage for this board">n/a</td>
										<td id="td_mcutemp" class="mcutemp hidden-sm hidden" title="Current temperature of the MCU">n/a</td>
										<td id="td_probe" class="no-diabase" title="Current Z-Probe reading on a scale between 0 and 1024">n/a</td>
										<td class="fan-rpm hidden" title="Current Fan RPM (needs a 4-pin PWM fan and proper wiring)">n/a</td>
									</tr>
								</table>
							</div>
						</div>
					</div>

					<!-- Tools / Heaters / Extra -->
					<div class="col-xs-12 col-sm-5 col-md-5 col-lg-4" id="div_tools_heaters">
						<!-- Tools -->
						<div id="div_tools" class="panel panel-default panel-status">
							<div class="panel-heading">
								<strong><span class="glyphicon glyphicon-wrench"></span> Tools</strong>
								<span>&nbsp;/&nbsp;</span>
								<a href="#" class="a-heaters"><span class="glyphicon glyphicon-fire"></span> Heaters</a>
								<span class="extra-temps hidden">&nbsp;/&nbsp;</span>
								<a href="#" class="a-extra extra-temps hidden"><span class="glyphicon glyphicon-plus"></span> Extra</a>

								<div class="dropdown pull-right" id="control_all_tools">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="control_all_tools"><span class="glyphicon glyphicon-menu-hamburger"></span> Control All <span class="caret"></span></a>
									<ul class="dropdown-menu" id="ul_control_dropdown_tools">
										<li>
											<a href="#" class="heaters-off"><span class="glyphicon glyphicon-off"></span> Turn everything off</a>
										</li>
										<li>
											<label>Active:</label>
											<div class="input-group input-group-sm">
												<input type="number" class="form-control all-temp-input" value="0" data-type="active" disabled>
												<div class="input-group-btn div-head-temp dropdown">
													<button type="button" class="btn btn-default dropdown-toggle btn-active-temp" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-active-temp"></ul>
												</div>
											</div>
										</li>
										<li>
											<label>Standby:</label>
											<div class="input-group input-group-sm">
												<input type="number" class="form-control all-temp-input" value="0" data-type="standby" disabled>
												<div class="input-group-btn div-head-temp dropdown">
													<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-standby-temp"></ul>
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>

							<table class="table table-bordered table-condensed table-centered-cells" id="table_tools">
								<thead>
									<tr>
										<th>Tool</th>
										<th>Heater</th>
										<th>Current</th>
										<th>Active</th>
										<th>Standby</th>
									</tr>
								</thead>

								<tbody>
									<tr data-tool="0" data-heater="1">
										<th>
											<a href="#"><span>Tool 0</span></a>
											<span class="text-muted"></span>
										</th>
										<th>
											<a href="#" class="heater-1">Heater 1</a>
											<span class="text-muted heater-state"></span>
										</th>
										<td class="current">n/a</td>
										<td class="input-td">
											<div class="input-group input-group-sm">
												<input type="number" class="form-control" value="0" data-type="active" disabled>
												<div class="input-group-btn div-head-temp hidden-sm">
													<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-active-temp">
													</ul>
												</div>
											</div>
										</td>
										<td class="input-td">
											<div class="input-group input-group-sm">
												<input type="number" class="form-control standby-input" value="0" data-type="standby" disabled>
												<div class="input-group-btn div-head-temp hidden-sm">
													<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-standby-temp">
													</ul>
												</div>
											</div>
										</td>
									</tr>

									<tr data-tool="1" data-heater="2">
										<th>
											<a href="#"><span>Tool 1</span></a>
											<span class="text-muted"></span>
										</th>
										<th>
											<a href="#" class="heater-2">Heater 2</a>
											<span class="text-muted heater-state"></span>
										</th>
										<td class="current">n/a</td>
										<td class="input-td">
											<div class="input-group input-group-sm">
												<input type="number" class="form-control" value="0" data-type="active" disabled>
												<div class="input-group-btn div-head-temp hidden-sm">
													<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-active-temp">
													</ul>
												</div>
											</div>
										</td>
										<td class="input-td">
											<div class="input-group input-group-sm">
												<input type="number" class="form-control" value="0" data-type="standby" disabled>
												<div class="input-group-btn div-head-temp hidden-sm">
													<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-standby-temp">
													</ul>
												</div>
											</div>
										</td>
									</tr>

									<tr data-heater="bed">
										<th>
											<a href="#">Bed</a>
										</th>
										<th>
											<a href="#" class="heater-0">Heater 0</a>
											<span class="text-muted heater-state"></span>
										</th>
										<td class="current">n/a</td>
										<td>
											<div class="input-group input-group-sm">
												<input type="number" class="form-control" value="0" disabled>
												<div class="input-group-btn div-head-temp hidden-sm">
													<button type="button" class="btn btn-default dropdown-toggle btn-bed-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-bed-temp">
													</ul>
												</div>
											</div>
										</td>
										<td></td>
									</tr>

									<tr data-heater="chamber" class="hidden">
										<th>
											<a href="#">Chamber</a>
										</th>
										<th>
											<a href="#" class="chamber">n/a</a>
											<span class="text-muted heater-state"></span>
										</th>
										<td class="current">n/a</td>
										<td>
											<div class="input-group input-group-sm">
												<input type="number" class="form-control" value="0" disabled>
												<div class="input-group-btn div-head-temp hidden-sm">
													<button type="button" class="btn btn-default dropdown-toggle btn-bed-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-bed-temp">
													</ul>
												</div>
											</div>
										</td>
										<td></td>
									</tr>

									<tr data-heater="cabinet" class="hidden">
										<th>
											<a href="#">Second Chamber</a>
										</th>
										<th>
											<a href="#" class="cabinet">n/a</a>
											<span class="text-muted heater-state"></span>
										</th>
										<td class="current">n/a</td>
										<td>
											<div class="input-group input-group-sm">
												<input type="number" class="form-control" value="0" disabled>
												<div class="input-group-btn div-head-temp hidden-sm">
													<button type="button" class="btn btn-default dropdown-toggle btn-bed-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-bed-temp">
													</ul>
												</div>
											</div>
										</td>
										<td></td>
									</tr>
								</tbody>
							</table>
						</div>

						<!-- Heater Temperatures -->
						<div id="div_heaters" class="panel panel-default panel-status hidden">
							<div class="panel-heading">
								<a href="#" class="a-tools"><span class="glyphicon glyphicon-wrench"></span> Tools</a>
								<span>&nbsp;/&nbsp;</span>
								<strong><span class="glyphicon glyphicon-fire"></span> Heaters</strong>
								<span class="extra-temps hidden">&nbsp;/&nbsp;</span>
								<a href="#" class="a-extra extra-temps hidden"><span class="glyphicon glyphicon-plus"></span> Extra</a>

								<div class="dropdown pull-right" id="control_all_heaters">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="control_all_heaters"><span class="glyphicon glyphicon-menu-hamburger"></span> Control All <span class="caret"></span></a>
									<ul class="dropdown-menu" id="ul_control_dropdown_heaters">
										<li>
											<a href="#" class="heaters-off"><span class="glyphicon glyphicon-off"></span> Turn everything off</a>
										</li>
										<li>
											<label>Active:</label>
											<div class="input-group input-group-sm">
												<input type="number" class="form-control all-temp-input" value="0" data-type="active" disabled>
												<div class="input-group-btn div-head-temp dropdown">
													<button type="button" class="btn btn-default dropdown-toggle btn-active-temp" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-active-temp"></ul>
												</div>
											</div>
										</li>
										<li>
											<label>Standby:</label>
											<div class="input-group input-group-sm">
												<input type="number" class="form-control all-temp-input" value="0" data-type="standby" disabled>
												<div class="input-group-btn div-head-temp dropdown">
													<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-standby-temp"></ul>
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>

							<table class="table table-bordered table-condensed table-centered-cells" id="table_heaters">
								<tr>
									<th></th>
									<th>Current</th>
									<th>Active</th>
									<th>Standby</th>
								</tr>

								<tr data-heater="1">
									<th>
										<a href="#" class="heater-1">Heater 1<span class="caret hidden"></span></a>
										<span class="text-muted heater-state"></span>
									</th>
									<td class="current">n/a</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="active" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-active-temp">
												</ul>
											</div>
										</div>
									</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="standby" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-standby-temp">
												</ul>
											</div>
										</div>
									</td>
								</tr>

								<tr data-heater="2">
									<th>
										<a href="#" class="heater-2">Heater 2<span class="caret hidden"></span></a>
										<span class="text-muted heater-state"></span>
									</th>
									<td class="current">n/a</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="active" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-active-temp">
												</ul>
											</div>
										</div>
									</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="standby" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-standby-temp">
												</ul>
											</div>
										</div>
									</td>
								</tr>

								<tr data-heater="3" class="hidden">
									<th>
										<a href="#" class="heater-3">Heater 3<span class="caret hidden"></span></a>
										<span class="text-muted heater-state"></span>
									</th>
									<td class="current">n/a</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="active" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-active-temp">
												</ul>
											</div>
										</div>
									</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="standby" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-standby-temp">
												</ul>
											</div>
										</div>
									</td>
								</tr>

								<tr data-heater="4" class="hidden">
									<th>
										<a href="#" class="heater-4">Heater 4<span class="caret hidden"></span></a>
										<span class="text-muted heater-state"></span>
									</th>
									<td class="current">n/a</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="active" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-active-temp">
												</ul>
											</div>
										</div>
									</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="standby" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-standby-temp">
												</ul>
											</div>
										</div>
									</td>
								</tr>

								<tr data-heater="5" class="hidden">
									<th>
										<a href="#" class="heater-5">Heater 5<span class="caret hidden"></span></a>
										<span class="text-muted heater-state"></span>
									</th>
									<td class="current">n/a</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="active" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-active-temp">
												</ul>
											</div>
										</div>
									</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="standby" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-standby-temp">
												</ul>
											</div>
										</div>
									</td>
								</tr>

								<tr data-heater="6" class="hidden">
									<th>
										<a href="#" class="heater-6">Heater 6<span class="caret hidden"></span></a>
										<span class="text-muted heater-state"></span>
									</th>
									<td class="current">n/a</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="active" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-active-temp">
												</ul>
											</div>
										</div>
									</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="standby" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-standby-temp">
												</ul>
											</div>
										</div>
									</td>
								</tr>

								<tr data-heater="7" class="hidden">
									<th>
										<a href="#" class="heater-7">Heater 7<span class="caret hidden"></span></a>
										<span class="text-muted heater-state"></span>
									</th>
									<td class="current">n/a</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="active" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-active-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-active-temp">
												</ul>
											</div>
										</div>
									</td>
									<td class="input-td">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" data-type="standby" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-standby-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-standby-temp">
												</ul>
											</div>
										</div>
									</td>
								</tr>

								<tr data-heater="bed">
									<th>
										<a href="#" class="heater-0">Bed</a>
										<span class="text-muted heater-state"></span>
									</th>
									<td class="current">n/a</td>
									<td>
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-bed-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-bed-temp">
												</ul>
											</div>
										</div>
									</td>
									<td></td>
								</tr>

								<tr data-heater="chamber" class="hidden">
									<th>
										<a href="#" class="chamber">Chamber</a>
										<span class="text-muted heater-state"></span>
									</th>
									<td class="current">n/a</td>
									<td>
										<div class="input-group input-group-sm">
											<input type="number" class="form-control" value="0" disabled>
											<div class="input-group-btn div-head-temp">
												<button type="button" class="btn btn-default dropdown-toggle btn-bed-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right ul-bed-temp">
												</ul>
											</div>
										</div>
									</td>
									<td></td>
								</tr>

									<tr data-heater="cabinet" class="hidden">
										<th>
											<a href="#">Dry Cabinet</a>
											<span class="text-muted heater-state"></span>
										</th>
										<td class="current">n/a</td>
										<td>
											<div class="input-group input-group-sm">
												<input type="number" class="form-control" value="0" disabled>
												<div class="input-group-btn div-head-temp hidden-sm">
													<button type="button" class="btn btn-default dropdown-toggle btn-bed-temp disabled" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu dropdown-menu-right ul-bed-temp">
													</ul>
												</div>
											</div>
										</td>
										<td></td>
									</tr>
							</table>
						</div>

						<div id="div_extra" class="panel panel-default panel-status hidden">
							<div class="panel-heading">
								<a href="#" class="a-tools"><span class="glyphicon glyphicon-wrench"></span> Tools</a>
								<span>&nbsp;/&nbsp;</span>
								<a href="#" class="a-heaters"><span class="glyphicon glyphicon-fire"></span> Heaters</a>
								<span>&nbsp;/&nbsp;</span>
								<strong><span class="glyphicon glyphicon-plus"></span> Extra</strong>
							</div>

							<table class="table table-bordered table-condensed table-centered-cells" id="table_extra">
								<tr>
									<th class="hidden-sm hidden-xs"></th>
									<th>Sensor</th>
									<th>Value</th>
								</tr>
								<tr data-sensor="0">
									<td class="hidden-sm hidden-xs"><label><input type="checkbox"> <span>Show in chart</span></label></td>
									<th class="temp-sensor-0">Sensor 1</th>
									<td>n/a</td>
								</tr>
								<tr data-sensor="1">
									<td class="hidden-sm hidden-xs"><label><input type="checkbox"> <span>Show in chart</span></label></td>
									<th class="temp-sensor-1">Sensor 2</th>
									<td>n/a</td>
								</tr>
								<tr data-sensor="2">
									<td class="hidden-sm hidden-xs"><label><input type="checkbox"> <span>Show in chart</span></label></td>
									<th class="temp-sensor-2">Sensor 3</th>
									<td>n/a</td>
								</tr>
								<tr data-sensor="3">
									<td class="hidden-sm hidden-xs"><label><input type="checkbox"> <span>Show in chart</span></label></td>
									<th class="temp-sensor-3">Sensor 4</th>
									<td>n/a</td>
								</tr>
								<tr data-sensor="4">
									<td class="hidden-sm hidden-xs"><label><input type="checkbox"> <span>Show in chart</span></label></td>
									<th class="temp-sensor-4">Sensor 5</th>
									<td>n/a</td>
								</tr>
								<tr data-sensor="5">
									<td class="hidden-sm hidden-xs"><label><input type="checkbox"> <span>Show in chart</span></label></td>
									<th class="temp-sensor-5">Sensor 6</th>
									<td>n/a</td>
								</tr>
								<tr data-sensor="6">
									<td class="hidden-sm hidden-xs"><label><input type="checkbox"> <span>Show in chart</span></label></td>
									<th class="temp-sensor-6">Sensor 7</th>
									<td>n/a</td>
								</tr>
								<tr data-sensor="7">
									<td class="hidden-sm hidden-xs"><label><input type="checkbox"> <span>Show in chart</span></label></td>
									<th class="temp-sensor-7">Sensor 8</th>
									<td>n/a</td>
								</tr>
								<tr data-sensor="8">
									<td class="hidden-sm hidden-xs"><label><input type="checkbox"> <span>Show in chart</span></label></td>
									<th class="temp-sensor-8">Sensor 9</th>
									<td>n/a</td>
								</tr>
								<tr data-sensor="9">
									<td class="hidden-sm hidden-xs"><label><input type="checkbox"> <span>Show in chart</span></label></td>
									<th class="temp-sensor-9">Sensor 10</th>
									<td>n/a</td>
								</tr>
							</table>
						</div>
					</div>

					<!-- Temperature Chart -->
					<div class="hidden-xs hidden-sm col-md-3 col-lg-5" id="div_temp_chart">
						<div class="panel panel-default panel-status">
							<div class="panel-heading">
								<span class="glyphicon glyphicon-scale"></span>
								<span>Temperature Chart</span>
							</div>

							<div class="panel-body panel-chart">
								<div id="chart_temp" title="Time vs. Temperature">
									<!-- see JS -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Content -->
			<div class="container-fluid">
				<div class="row">
					<!-- Static sidebar -->
					<div id="div_static_sidebar" class="col-sm-3 col-md-2 col-lg-2 hidden-xs">
						<div class="well">
							<div class="list-group">
								<a class="navlink list-group-item active" href="#" data-target="control"><span class="glyphicon glyphicon-home"></span> Machine Control</a>
								<a class="navlink list-group-item" href="#" data-target="job"><span class="glyphicon glyphicon-print"></span> Job Status</a>
							</div>

							<div class="list-group scan-control hidden">
								<a class="navlink list-group-item" href="#" data-target="scanner"><span class="glyphicon glyphicon-facetime-video"></span> 3D Scanner <span class="glyphicon glyphicon-refresh span-refresh-scans hidden"></span></a>
							</div>

							<div class="list-group">
								<a class="navlink list-group-item" href="#" data-target="console"><span class="glyphicon glyphicon-console"></span> G-Code Console</a>
								<a class="navlink list-group-item" href="#" data-target="files"><span class="glyphicon glyphicon-hdd"></span> G-Code Files <span class="glyphicon glyphicon-refresh span-refresh-files hidden"></span></a>
								<a class="navlink list-group-item" href="#" data-target="macros"><span class="glyphicon glyphicon-link"></span> Macros <span class="glyphicon glyphicon-refresh span-refresh-macros hidden"></span></a>
							</div>

							<div class="list-group">
								<a class="navlink list-group-item" href="#" data-target="filaments"><span class="glyphicon glyphicon-cd"></span> Filaments <span class="glyphicon glyphicon-refresh span-refresh-filaments hidden"></span></a>
								<a class="navlink list-group-item diabase hidden" href="#" data-target="calibration"><span class="glyphicon glyphicon-screenshot"></span> Offsets</a>
								<a class="navlink list-group-item" href="#" data-target="settings"><span class="glyphicon glyphicon-cog"></span> Settings</a>
							</div>
						</div>
					</div>

					<!-- Page Contents -->
					<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10" id="div_content">
						<!-- Control Page -->
						<div id="page_control" class="page active">
							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
									<div class="panel panel-default" id="panel_head_movement">
										<div class="panel-heading">
											<button data-axis="all" class="pull-left btn btn-primary btn-xs btn-home visible-lg disabled" id="btn_homeall" title="Home all axes (G28)">Home All</button>
											<span>Head Movement</span>
											<div class="btn-group pull-right">
												<button data-gcode="G32" class="btn btn-primary btn-xs gcode disabled" id="btn_bed_compensation" title="Perform automatic bed compensation / calibration (G32)">Auto Bed Compensation</button>
												<button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle disabled" id="btn_bed_dropdown"><span class="caret"></span></button>
												<ul class="dropdown-menu">
													<li class="text-center text-muted compensation hidden"><span>Compensation in use:</span> <span id="span_compensation">None</span></li>
													<li class="divider compensation hidden"></li>
													<li title="Shows the currently used probe points as generated by G32" class="disabled"><a id="a_show_bed_points" href="#"><span class="glyphicon glyphicon-modal-window"></span> Show Probed Points</a></li>
													<li title="Disables the automatic bed compensation (M561)"><a data-gcode="M561" href="#"><span class="glyphicon glyphicon-erase"></span> Disable Bed Compensation</a></li>
													<li class="divider"></li>
													<li title="Set area for mesh compensation (M557)"><a id="a_define_mesh" href="#"><span class="glyphicon glyphicon-edit"></span> Define Area for Mesh Grid Compensation</a></li>
													<li title="Perform automatic mesh compensation (G29)"><a data-gcode="G29" href="#"><span class="glyphicon glyphicon-th"></span> Run Mesh Grid Compensation</a></li>
													<li title="Show the probe point heightmap as generated by G29"><a id="a_show_heightmap" href="#"><span class="glyphicon glyphicon-modal-window"></span> Show Mesh Grid Heightmap</a></li>
													<li title="Load the saved heightmap from /sys/heightmap.csv and enable it (G29 S1)"><a data-gcode="G29 S1" href="#"><span class="glyphicon glyphicon-folder-open"></span> Load Heightmap from SD Card</a></li>
													<li title="Clear the automatic mesh-based compensation parameters (G29 S2)"><a data-gcode="G29 S2" href="#"><span class="glyphicon glyphicon-erase"></span> Disable Mesh Grid Compensation</a></li>
													<li class="divider diabase hidden"></li>
													<li class="diabase hidden"><a href="#" id="a_probe_cylinder"><span class="glyphicon glyphicon-repeat"></span> Probe Cylinder for Rotary Printing</a></li>
												</ul>
											</div>
										</div>

										<div class="panel-body">
											<div class="hidden-lg btn-group btn-group-justified mobile-home-buttons">
												<div class="btn-group"><button data-axis="all" class="btn btn-primary btn-home disabled">Home All</button></div>
												<div class="btn-group"><button data-axis="0" class="btn btn-primary btn-home disabled">Home X</button></div>
												<div class="btn-group"><button data-axis="1" class="btn btn-primary btn-home disabled">Home Y</button></div>
												<div class="btn-group"><button data-axis="2" class="btn btn-primary btn-home disabled">Home Z</button></div>
											</div>
											<table id="table_move_head" class="table-move">
												<tr>
													<td class="visible-lg">
														<div class="btn-group">
															<a href="#" data-axis="0" class="btn btn-primary btn-home disabled" title="Home X axis (G28 X)">Home X</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="0" data-amount="-100" class="btn btn-default btn-move visible-xl disabled"><span class="glyphicon glyphicon-chevron-left"></span> X-100</a>
															<a href="#" data-axis="0" data-amount="-50" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> X-50</a>
															<a href="#" data-axis="0" data-amount="-10" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> X-10</a>
															<a href="#" data-axis="0" data-amount="-1" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> X-1</a>
															<a href="#" data-axis="0" data-amount="-0.1" class="btn btn-default btn-move visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> X-0.1</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="0" data-amount="0.1" class="btn btn-default btn-move visible-lg disabled">X+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="0" data-amount="1" class="btn btn-default btn-move disabled">X+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="0" data-amount="10" class="btn btn-default btn-move disabled">X+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="0" data-amount="50" class="btn btn-default btn-move disabled">X+50 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="0" data-amount="100" class="btn btn-default btn-move visible-xl disabled">X+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
														</div>
													</td>
												</tr>
												<tr>
													<td class="visible-lg">
														<div class="btn-group">
															<a href="#" data-axis="1" class="btn btn-primary btn-home disabled" title="Home Y axis (G28 Y)">Home Y</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="1" data-amount="-100" class="btn btn-default btn-move visible-xl disabled"><span class="glyphicon glyphicon-chevron-left"></span> Y-100</a>
															<a href="#" data-axis="1" data-amount="-50" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> Y-50</a>
															<a href="#" data-axis="1" data-amount="-10" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> Y-10</a>
															<a href="#" data-axis="1" data-amount="-1" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> Y-1</a>
															<a href="#" data-axis="1" data-amount="-0.1" class="btn btn-default btn-move visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> Y-0.1</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="1" data-amount="0.1" class="btn btn-default btn-move visible-lg disabled">Y+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="1" data-amount="1" class="btn btn-default btn-move disabled">Y+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="1" data-amount="10" class="btn btn-default btn-move disabled">Y+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="1" data-amount="50" class="btn btn-default btn-move disabled">Y+50 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="1" data-amount="100" class="btn btn-default btn-move visible-xl disabled">Y+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
														</div>
													</td>
												</tr>
												<tr>
													<td class="visible-lg">
														<div class="btn-group">
															<a href="#" data-axis="2" class="btn btn-primary btn-home disabled" title="Home Z axis (G28 Z)">Home Z</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="2" data-amount="-50" class="btn btn-default btn-move visible-xl disabled"><span class="glyphicon glyphicon-chevron-left"></span> Z-50</a>
															<a href="#" data-axis="2" data-amount="-25" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> Z-25</a>
															<a href="#" data-axis="2" data-amount="-5" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> Z-5</a>
															<a href="#" data-axis="2" data-amount="-0.5" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> Z-0.5</a>
															<a href="#" data-axis="2" data-amount="-0.05" class="btn btn-default btn-move visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> Z-0.05</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="2" data-amount="0.05" class="btn btn-default btn-move visible-lg disabled">Z+0.05 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="2" data-amount="0.5" class="btn btn-default btn-move disabled">Z+0.5 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="2" data-amount="5" class="btn btn-default btn-move disabled">Z+5 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="2" data-amount="25" class="btn btn-default btn-move disabled">Z+25 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="2" data-amount="50" class="btn btn-default btn-move visible-xl disabled">Z+50 <span class="glyphicon glyphicon-chevron-right"></span></a>
														</div>
													</td>
												</tr>
											</table>
										</div>
									</div>

									<div class="panel panel-default hidden" id="panel_extra_axes">
										<div class="panel-heading">
											<span>Additional Axes</span>
										</div>

										<div class="panel-body">
											<div class="hidden-lg btn-group btn-group-justified mobile-home-buttons">
												<div class="btn-group"><button data-axis="3" class="btn btn-primary btn-home disabled">Home U</button></div>
												<div class="btn-group"><button data-axis="4" class="btn btn-primary btn-home disabled">Home V</button></div>
												<div class="btn-group"><button data-axis="5" class="btn btn-primary btn-home disabled">Home W</button></div>
												<div class="btn-group"><button data-axis="6" class="btn btn-primary btn-home disabled">Home A</button></div>
												<div class="btn-group"><button data-axis="7" class="btn btn-primary btn-home disabled">Home B</button></div>
												<div class="btn-group"><button data-axis="8" class="btn btn-primary btn-home disabled">Home C</button></div>
											</div>
											<table id="table_move_axes" class="table-move">
												<tr>
													<td class="visible-lg">
														<div class="btn-group">
															<a href="#" data-axis="3" class="btn btn-primary btn-home disabled" title="Home U axis (G28 U)">Home U</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="3" data-amount="-100" class="btn btn-default btn-move visible-xl disabled"><span class="glyphicon glyphicon-chevron-left"></span> U-100</a>
															<a href="#" data-axis="3" data-amount="-50" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> U-50</a>
															<a href="#" data-axis="3" data-amount="-10" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> U-10</a>
															<a href="#" data-axis="3" data-amount="-1" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> U-1</a>
															<a href="#" data-axis="3" data-amount="-0.1" class="btn btn-default btn-move visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> U-0.1</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="3" data-amount="0.1" class="btn btn-default btn-move visible-lg disabled">U+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="3" data-amount="1" class="btn btn-default btn-move disabled">U+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="3" data-amount="10" class="btn btn-default btn-move disabled">U+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="3" data-amount="50" class="btn btn-default btn-move disabled">U+50 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="3" data-amount="100" class="btn btn-default btn-move visible-xl disabled">U+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
														</div>
													</td>
												</tr>
												<tr>
				<td class="visible-lg">
														<div class="btn-group">
															<a href="#" data-axis="4" class="btn btn-primary btn-home disabled" title="Home V axis (G28 V)">Home V</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="4" data-amount="-100" class="btn btn-default btn-move visible-xl disabled"><span class="glyphicon glyphicon-chevron-left"></span> V-100</a>
															<a href="#" data-axis="4" data-amount="-50" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> V-50</a>
															<a href="#" data-axis="4" data-amount="-10" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> V-10</a>
															<a href="#" data-axis="4" data-amount="-1" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> V-1</a>
															<a href="#" data-axis="4" data-amount="-0.1" class="btn btn-default btn-move visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> V-0.1</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="4" data-amount="0.1" class="btn btn-default btn-move visible-lg disabled">V+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="4" data-amount="1" class="btn btn-default btn-move disabled">V+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="4" data-amount="10" class="btn btn-default btn-move disabled">V+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="4" data-amount="50" class="btn btn-default btn-move disabled">V+50 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="4" data-amount="100" class="btn btn-default btn-move visible-xl disabled">V+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
														</div>
													</td>
												</tr>
												<tr>
													<td class="visible-lg">
														<div class="btn-group">
															<a href="#" data-axis="5" class="btn btn-primary btn-home disabled" title="Home W axis (G28 W)">Home W</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="5" data-amount="-100" class="btn btn-default btn-move visible-xl disabled"><span class="glyphicon glyphicon-chevron-left"></span> W-100</a>
															<a href="#" data-axis="5" data-amount="-50" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> W-10</a>
															<a href="#" data-axis="5" data-amount="-10" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> W-10</a>
															<a href="#" data-axis="5" data-amount="-1" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> W-1</a>
															<a href="#" data-axis="5" data-amount="-0.1" class="btn btn-default btn-move visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> W-0.1</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="5" data-amount="0.1" class="btn btn-default btn-move visible-lg disabled">W+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="5" data-amount="1" class="btn btn-default btn-move disabled">W+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="5" data-amount="10" class="btn btn-default btn-move disabled">W+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="5" data-amount="50" class="btn btn-default btn-move disabled">W+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="5" data-amount="100" class="btn btn-default btn-move visible-xl disabled">W+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
														</div>
													</td>
												</tr>
												<tr>
													<td class="visible-lg">
														<div class="btn-group">
															<a href="#" data-axis="6" class="btn btn-primary btn-home disabled" title="Home A axis (G28 A)">Home A</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="6" data-amount="-100" class="btn btn-default btn-move visible-xl disabled"><span class="glyphicon glyphicon-chevron-left"></span> A-100</a>
															<a href="#" data-axis="6" data-amount="-50" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> A-50</a>
															<a href="#" data-axis="6" data-amount="-10" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> A-10</a>
															<a href="#" data-axis="6" data-amount="-1" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> A-1</a>
															<a href="#" data-axis="6" data-amount="-0.1" class="btn btn-default btn-move visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> A-0.1</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="6" data-amount="0.1" class="btn btn-default btn-move visible-lg disabled">A+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="6" data-amount="1" class="btn btn-default btn-move disabled">A+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="6" data-amount="10" class="btn btn-default btn-move disabled">A+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="6" data-amount="50" class="btn btn-default btn-move disabled">A+50 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="6" data-amount="100" class="btn btn-default btn-move visible-xl disabled">A+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
														</div>
													</td>
												</tr>
												<tr>
													<td class="visible-lg">
														<div class="btn-group">
															<a href="#" data-axis="7" class="btn btn-primary btn-home disabled" title="Home B axis (G28 B)">Home B</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="7" data-amount="-100" class="btn btn-default btn-move visible-xl disabled"><span class="glyphicon glyphicon-chevron-left"></span> B-100</a>
															<a href="#" data-axis="7" data-amount="-50" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> B-10</a>
															<a href="#" data-axis="7" data-amount="-10" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> B-10</a>
															<a href="#" data-axis="7" data-amount="-1" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> B-1</a>
															<a href="#" data-axis="7" data-amount="-0.1" class="btn btn-default btn-move visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> B-0.1</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="7" data-amount="0.1" class="btn btn-default btn-move visible-lg disabled">B+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="7" data-amount="1" class="btn btn-default btn-move disabled">B+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="7" data-amount="10" class="btn btn-default btn-move disabled">B+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="7" data-amount="50" class="btn btn-default btn-move disabled">B+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="7" data-amount="100" class="btn btn-default btn-move visible-xl disabled">B+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
														</div>
													</td>
												</tr>
												<tr>
													<td class="visible-lg">
														<div class="btn-group">
															<a href="#" data-axis="8" class="btn btn-primary btn-home disabled" title="Home C axis (G28 C)">Home C</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="8" data-amount="-100" class="btn btn-default btn-move visible-xl disabled"><span class="glyphicon glyphicon-chevron-left"></span> C-100</a>
															<a href="#" data-axis="8" data-amount="-50" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> C-50</a>
															<a href="#" data-axis="8" data-amount="-10" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> C-10</a>
															<a href="#" data-axis="8" data-amount="-1" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> C-1</a>
															<a href="#" data-axis="8" data-amount="-0.1" class="btn btn-default btn-move visible-lg disabled"><span class="glyphicon glyphicon-chevron-left"></span> C-0.1</a>
														</div>
													</td>
													<td>
														<div class="btn-group btn-group-justified">
															<a href="#" data-axis="8" data-amount="0.1" class="btn btn-default btn-move visible-lg disabled">C+0.1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="8" data-amount="1" class="btn btn-default btn-move disabled">C+1 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="8" data-amount="10" class="btn btn-default btn-move disabled">C+10 <span class="glyphicon glyphicon-chevron-right"></span></a>
															<a href="#" data-axis="8" data-amount="50" class="btn btn-default btn-move disabled"><span class="glyphicon glyphicon-chevron-left"></span> C+50</a>
															<a href="#" data-axis="8" data-amount="100" class="btn btn-default btn-move visible-xl disabled">C+100 <span class="glyphicon glyphicon-chevron-right"></span></a>
														</div>
													</td>
												</tr>
											</table>
										</div>
									</div>

									<div class="alert alert-warning hidden home-warning">
										<span class="glyphicon glyphicon-warning-sign"></span>
										<span id="unhomed_warning">The following axes are not homed: <strong id="unhomed_axes">X, Y, Z</strong></span>
									</div>

									<div class="panel panel-default" id="panel_extrude">
										<div class="panel-heading">
											<span>Extruder Control</span>
										</div>

										<div class="panel-body">
											<div class="col-xs-10 col-sm-10 col-md-10 col-lg-3 hidden" id="div_extruders">
												<label>Extruder Drive:</label>
												<div class="btn-group btn-group-justified" data-toggle="buttons">
													<label class="btn btn-primary disabled active" title="Requires mixing to be configured via M567+M568">
														<input type="radio" name="extruder" value="mix" checked> Mix
													</label>
													<label class="btn btn-default disabled">
														<input type="radio" name="extruder" value="all"> All
													</label>
													<label class="btn btn-default disabled extr-0">
														<input type="radio" name="extruder" value="0"> 0
													</label>
													<label class="btn btn-default disabled extr-1">
														<input type="radio" name="extruder" value="1"> 1
													</label>
													<label class="btn btn-default disabled extr-2 hidden">
														<input type="radio" name="extruder" value="2"> 2
													</label>
													<label class="btn btn-default disabled extr-3 hidden">
														<input type="radio" name="extruder" value="3"> 3
													</label>
													<label class="btn btn-default disabled extr-4 hidden">
														<input type="radio" name="extruder" value="4"> 4
													</label>
													<label class="btn btn-default disabled extr-5 hidden">
														<input type="radio" name="extruder" value="5"> 5
													</label>
													<label class="btn btn-default disabled extr-6 hidden">
														<input type="radio" name="extruder" value="6"> 6
													</label>
													<label class="btn btn-default disabled extr-7 hidden">
														<input type="radio" name="extruder" value="7"> 7
													</label>
													<label class="btn btn-default disabled extr-8 hidden">
														<input type="radio" name="extruder" value="8"> 8
													</label>
												</div>
											</div>

											<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 no-horizontal-padding" id="div_feed">
												<label>Feed amount in mm:</label>
												<div class="btn-group btn-group-justified" data-toggle="buttons">
													<label class="btn btn-default disabled">
														<input type="radio" name="feed" value="100">
														<span>100</span>
													</label>
													<label class="btn btn-default disabled">
														<input type="radio" name="feed" value="50">
														<span>50</span>
													</label>
													<label class="btn btn-default disabled">
														<input type="radio" name="feed" value="20">
														<span>20</span>
													</label>
													<label class="btn btn-primary disabled active">
														<input type="radio" name="feed" value="10" checked>
														<span>10</span>
													</label>
													<label class="btn btn-default disabled">
														<input type="radio" name="feed" value="5">
														<span>5</span>
													</label>
													<label class="btn btn-default disabled">
														<input type="radio" name="feed" value="1">
														<span>1</span>
													</label>
												</div>
											</div>

											<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" id="div_feedrate">
												<label>Feedrate in mm/sec:</label>
												<div class="btn-group btn-group-justified" data-toggle="buttons">
													<label class="btn btn-default disabled">
														<input type="radio" name="feedrate" value="60">
														<span>60</span>
													</label>
													<label class="btn btn-default disabled">
														<input type="radio" name="feedrate" value="30">
														<span>30</span>
													</label>
													<label class="btn btn-default disabled">
														<input type="radio" name="feedrate" value="15">
														<span>15</span>
													</label>
													<label class="btn btn-primary disabled active">
														<input type="radio" name="feedrate" value="5" checked>
														<span>5</span>
													</label>
													<label class="btn btn-default disabled">
														<input type="radio" name="feedrate" value="1">
														<span>1</span>
													</label>
												</div>
											</div>

											<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 no-horizontal-padding" id="div_extrude">
												<div class="btn-group-vertical btn-group-vertical-justified">
													<div class="btn-group">
														<button class="btn btn-sm btn-default btn-retract disabled" id="btn_retract" title="Retract a specific amount of filament at a given feedrate (G1 E-xxx Fyyy)"><span class="glyphicon glyphicon-arrow-up"></span> Retract</button>
													</div>
													<div class="btn-group">
														<button class="btn btn-sm btn-primary btn-extrude disabled" id="btn_extrude" title="Extrude a specific amount of filament at a given feedrate (G1 Exxx Fyyy)"><span class="glyphicon glyphicon-arrow-down"></span> Extrude</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-right">
									<div class="panel panel-default" id="panel_macro_buttons">
										<div class="panel-heading">
											<span>User-Defined Macros</span>
										</div>

										<div class="panel-body text-center">
											<h4 class="text-muted">Connect to your Duet to display Macro files</h4>
											<div class="btn-group-vertical btn-group-vertical-justified"></div>
										</div>
									</div>
								</div>

								<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-right">
									<div class="panel panel-default" id="panel_control_misc">
										<div class="panel-heading">
											<span>Miscellaneous</span>
										</div>
										<div class="panel-body">
											<table class="table-description">
												<tr class="atx-control">
													<td>ATX Power:</td>
													<td>
														<div class="btn-group btn-group-justified" data-toggle="buttons">
															<div class="btn-group">
																<label class="btn btn-success disabled" title="Turn on ATX power (M80)">
																	<input type="radio" name="atxPower" value="1">On
																</label>
															</div>
															<div class="btn-group">
																<label class="btn btn-danger active disabled" title="Turn off ATX power (M81)">
																	<input type="radio" name="atxPower" value="0" checked>Off
																</label>
															</div>
														</div>
													</td>
												</tr>
												<tr class="fan-control">
													<td colspan="2">
														<table class="table-fan-control" id="table_fan_control">
															<tr data-fan="tool">
																<td colspan="2">
																	<button class="btn btn-primary btn-sm active fan-visibility">Tool Fan</button>
																</td>
																<td>
																	<div class="fan-slider" data-slideout-ignore>
																		<input id="slider_fan_control_tool" type="text" title="Set current fan value (via M106)" disabled/>
																	</div>
																</td>
															</tr>
															<tr data-fan="0" class="hidden">
																<td>
																	<button class="btn btn-primary btn-sm active fan-visibility">Fan 0</button>
																</td>
																<td>
																	<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
																		<span class="glyphicon glyphicon-pushpin"></span>
																	</button>
																</td>
																<td>
																	<div class="fan-slider" data-slideout-ignore>
																		<input id="slider_fan_control_0" type="text" title="Set current fan value (via M106)" disabled/>
																	</div>
																</td>
															</tr>
															<tr data-fan="1" class="hidden">
																<td>
																	<button class="btn btn-primary btn-sm active fan-visibility">Fan 1</button>
																</td>
																<td>
																	<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
																		<span class="glyphicon glyphicon-pushpin"></span>
																	</button>
																</td>
																<td>
																	<div class="fan-slider" data-slideout-ignore>
																		<input id="slider_fan_control_1" type="text" title="Set current fan value (via M106)" disabled/>
																	</div>
																</td>
															</tr>
															<tr data-fan="2" class="hidden">
																<td>
																	<button class="btn btn-primary btn-sm active fan-visibility">Fan 2</button>
																</td>
																<td>
																	<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
																		<span class="glyphicon glyphicon-pushpin"></span>
																	</button>
																</td>
																<td>
																	<div class="fan-slider" data-slideout-ignore>
																		<input id="slider_fan_control_2" type="text" title="Set current fan value (via M106)" disabled/>
																	</div>
																</td>
															</tr>
															<tr data-fan="3" class="hidden">
																<td>
																	<button class="btn btn-primary btn-sm active fan-visibility">Fan 3</button>
																</td>
																<td>
																	<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
																		<span class="glyphicon glyphicon-pushpin"></span>
																	</button>
																</td>
																<td>
																	<div class="fan-slider" data-slideout-ignore>
																		<input id="slider_fan_control_3" type="text" title="Set current fan value (via M106)" disabled/>
																	</div>
																</td>
															</tr>
															<tr data-fan="4" class="hidden">
																<td>
																	<button class="btn btn-primary btn-sm active fan-visibility">Fan 4</button>
																</td>
																<td>
																	<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
																		<span class="glyphicon glyphicon-pushpin"></span>
																	</button>
																</td>
																<td>
																	<div class="fan-slider" data-slideout-ignore>
																		<input id="slider_fan_control_4" type="text" title="Set current fan value (via M106)" disabled/>
																	</div>
																</td>
															</tr>
															<tr data-fan="5" class="hidden">
																<td>
																	<button class="btn btn-primary btn-sm active fan-visibility">Fan 5</button>
																</td>
																<td>
																	<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
																		<span class="glyphicon glyphicon-pushpin"></span>
																	</button>
																</td>
																<td>
																	<div class="fan-slider" data-slideout-ignore>
																		<input id="slider_fan_control_5" type="text" title="Set current fan value (via M106)" disabled/>
																	</div>
																</td>
															</tr>
															<tr data-fan="6" class="hidden">
																<td>
																	<button class="btn btn-primary btn-sm active fan-visibility">Fan 6</button>
																</td>
																<td>
																	<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
																		<span class="glyphicon glyphicon-pushpin"></span>
																	</button>
																</td>
																<td>
																	<div class="fan-slider" data-slideout-ignore>
																		<input id="slider_fan_control_6" type="text" title="Set current fan value (via M106)" disabled/>
																	</div>
																</td>
															</tr>
															<tr data-fan="7" class="hidden">
																<td>
																	<button class="btn btn-primary btn-sm active fan-visibility">Fan 7</button>
																</td>
																<td>
																	<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
																		<span class="glyphicon glyphicon-pushpin"></span>
																	</button>
																</td>
																<td>
																	<div class="fan-slider" data-slideout-ignore>
																		<input id="slider_fan_control_7" type="text" title="Set current fan value (via M106)" disabled/>
																	</div>
																</td>
															</tr>
															<tr data-fan="8" class="hidden">
																<td>
																	<button class="btn btn-primary btn-sm active fan-visibility">Fan 8</button>
																</td>
																<td>
																	<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
																		<span class="glyphicon glyphicon-pushpin"></span>
																	</button>
																</td>
																<td>
																	<div class="fan-slider" data-slideout-ignore>
																		<input id="slider_fan_control_8" type="text" title="Set current fan value (via M106)" disabled/>
																	</div>
																</td>
															</tr>
														</table>
													</td>
												</tr>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- Job Status -->
						<div id="page_job" class="page">
							<div class="row row-progress hidden">
								<div class="col-xs-12 col-sm-12 col-md-6 col-lg-5">
									<span id="span_progress_left"></span>
								</div>
								<div class="col-xs-12 col-sm-12 col-md-6 col-lg-7">
									<span id="span_progress_right"></span>
								</div>
							</div>
							<div class="row row-progress hidden">
								<div class="col-md-12">
									<div class="progress">
										<div class="progress-bar progress-bar-striped" id="progress"></div>
									</div>
								</div>
							</div>

							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-6 col-md-push-3 col-lg-7 col-lg-push-2">
									<div id="panel_webcam" class="panel panel-default hidden">
										<div class="panel-heading">
											<a id="a_webcam" href="#">Webcam Surveillance</a>
											<span id="span_webcam" class="glyphicon glyphicon-menu-down"></span>
										</div>
										<div class="panel-body">
											<img src="about:blank" id="img_webcam" alt="(image not available)">

											<div id="div_ifm_webcam" class="embed-responsive embed-responsive-16by9 hidden">
												<iframe src="about:blank" id="ifm_webcam" class="embed-responsive-item"></iframe>
											</div>
										</div>
									</div>

									<div class="panel panel-default">
										<div class="panel-heading">
											<span>Layer Statistics</span>
										</div>
										<div class="panel-body panel-chart">
											<div id="chart_print">
												<!-- see JS-->
											</div>
										</div>
									</div>

									<div id="panel_job_info" class="panel panel-default">
										<div class="panel-heading">
											<span>Collected Data</span>
										</div>

										<table class="table table-bordered table-condensed">
											<tr>
												<th>Warm-Up Time</th>
												<th>Current Layer Time</th>
												<th>Last Layer Time</th>
												<th>Job Duration</th>
											</tr>
											<tr>
												<td id="td_warmup_time">n/a</td>
												<td id="td_layertime">n/a</td>
												<td id="td_last_layertime">n/a</td>
												<td id="td_job_duration">n/a</td>
											</tr>
										</table>
									</div>

									<div class="panel panel-default">
										<div class="panel-heading">
											<span>Estimations</span>
										</div>

										<table class="table table-bordered table-condensed" id="table_estimations">
											<tr>
												<th>Based on</th>
												<th>File Progress</th>
												<th>Filament Usage</th>
												<th>Layer Time</th>
											</tr>
											<tr>
												<th>Time Left</th>
												<td id="tl_file">n/a</td>
												<td id="tl_filament">n/a</td>
												<td id="tl_layer">n/a</td>
											</tr>
											<tr>
												<th>Est. End Time</th>
												<td id="et_file">n/a</td>
												<td id="et_filament">n/a</td>
												<td id="et_layer">n/a</td>
											</tr>
										</table>
									</div>
								</div>

								<div class="col-xs-4 col-sm-6 col-md-3 col-md-pull-6 col-lg-2 col-lg-pull-7 col-left">
									<div class="panel panel-default" id="panel_job_control">
										<div class="panel-heading">
											<span>Job Control</span>
										</div>
										<div class="panel-body">
											<div class="btn-group-justified">
												<div class="btn-group">
													<button class="btn btn-warning disabled" id="btn_pause" title="Pause current job (M25)"><span class="glyphicon glyphicon-pause"></span> <span>Pause Job</span></button>
												</div>
												<div class="btn-group hidden" id="div_cancel">
													<button class="btn btn-danger" id="btn_cancel" title="Cancel paused job (M0)"><span class="glyphicon glyphicon-stop"></span> Cancel</button>
												</div>
											</div>
											<div class="btn-group-justified hidden" id="div_process_another">
												<div class="btn-group">
													<button class="btn btn-success" id="btn_process_another" title="Start the same file once again"><span class="glyphicon glyphicon-refresh"></span> <span>Start Another</span></button>
												</div>
											</div>

											<div class="checkbox disabled">
												<label title="Run M1 when the job has finished">
													<input type="checkbox" id="auto_sleep" disabled/> Enable Auto-Sleep
												</label>
											</div>
										</div>
									</div>

									<div class="panel panel-default babystepping">
										<div class="panel-heading">
											<span>Z Baby Stepping</span>
										</div>
										<div class="panel-body">
											<p>Current Offset: <span id="span_babystepping">n/a</span></p>

											<div class="btn-group btn-group-justified">
												<div class="btn-group">
													<button class="btn btn-default btn-sm disabled" id="btn_baby_down" title="Lower the tool head by a tiny amount without modifying the machine's Z position (M290 Sxxx)">
														<span class="glyphicon glyphicon-save"></span>
														<span class="content">-</span>
													</button>
												</div>
												<div class="btn-group">
													<button class="btn btn-default btn-sm disabled" id="btn_baby_up" title="Lift the tool head by a tiny amount without modifying the machine's Z position (M290 Sxxx)">
														<span class="glyphicon glyphicon-open"></span>
														<span class="content">+</span>
													</button>
												</div>
											</div>
										</div>
									</div>

									<div class="panel panel-default">
										<div class="panel-heading">
											<span>File Information</span>
										</div>
										<div class="panel-body">
											<dl>
												<dt>Size:</dt>
												<dd id="dd_size">n/a</dd>
												<dt>Object Height:</dt>
												<dd id="dd_height">n/a</dd>
												<dt>Layer Height:</dt>
												<dd id="dd_layer_height">n/a</dd>
												<dt>Filament Usage:</dt>
												<dd id="dd_filament">n/a</dd>
												<dt>Generated by:</dt>
												<dd id="dd_generatedby">n/a</dd>
											</dl>
										</div>
									</div>
								</div>

								<div class="col-xs-8 col-sm-6 col-md-3 col-lg-3 col-right">
									<div class="panel panel-default fan-control">
										<div class="panel-heading">
											<span>Fan Control</span>
										</div>

										<div class="panel-body">
											<table class="table-fan-control" id="table_fan_job">
												<tr data-fan="tool">
													<td colspan="2">
														<button class="btn btn-primary btn-sm active fan-visibility">Tool Fan</button>
													</td>
													<td>
														<div class="fan-slider" data-slideout-ignore>
															<input id="slider_fan_job_tool" type="text" title="Set current fan value (via M106)" disabled/>
														</div>
													</td>
												</tr>
												<tr data-fan="0" class="hidden">
													<td>
														<button class="btn btn-primary btn-sm active fan-visibility">Fan 0</button>
													</td>
													<td>
														<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
															<span class="glyphicon glyphicon-pushpin"></span>
														</button>
													</td>
													<td>
														<div class="fan-slider" data-slideout-ignore>
															<input id="slider_fan_job_0" type="text" title="Set current fan value (via M106)" disabled/>
														</div>
													</td>
												</tr>
												<tr data-fan="1" class="hidden">
													<td>
														<button class="btn btn-primary btn-sm active fan-visibility">Fan 1</button>
													</td>
													<td>
														<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
															<span class="glyphicon glyphicon-pushpin"></span>
														</button>
													</td>
													<td>
														<div class="fan-slider" data-slideout-ignore>
															<input id="slider_fan_job_1" type="text" title="Set current fan value (via M106)" disabled/>
														</div>
													</td>
												</tr>
												<tr data-fan="2" class="hidden">
													<td>
														<button class="btn btn-primary btn-sm active fan-visibility">Fan 2</button>
													</td>
													<td>
														<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
															<span class="glyphicon glyphicon-pushpin"></span>
														</button>
													</td>
													<td>
														<div class="fan-slider" data-slideout-ignore>
															<input id="slider_fan_job_2" type="text" title="Set current fan value (via M106)" disabled/>
														</div>
													</td>
												</tr>
												<tr data-fan="3" class="hidden">
													<td>
														<button class="btn btn-primary btn-sm active fan-visibility">Fan 3</button>
													</td>
													<td>
														<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
															<span class="glyphicon glyphicon-pushpin"></span>
														</button>
													</td>
													<td>
														<div class="fan-slider" data-slideout-ignore>
															<input id="slider_fan_job_3" type="text" title="Set current fan value (via M106)" disabled/>
														</div>
													</td>
												</tr>
												<tr data-fan="4" class="hidden">
													<td>
														<button class="btn btn-primary btn-sm active fan-visibility">Fan 4</button>
													</td>
													<td>
														<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
															<span class="glyphicon glyphicon-pushpin"></span>
														</button>
													</td>
													<td>
														<div class="fan-slider" data-slideout-ignore>
															<input id="slider_fan_job_4" type="text" title="Set current fan value (via M106)" disabled/>
														</div>
													</td>
												</tr>
												<tr data-fan="5" class="hidden">
													<td>
														<button class="btn btn-primary btn-sm active fan-visibility">Fan 5</button>
													</td>
													<td>
														<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
															<span class="glyphicon glyphicon-pushpin"></span>
														</button>
													</td>
													<td>
														<div class="fan-slider" data-slideout-ignore>
															<input id="slider_fan_job_5" type="text" title="Set current fan value (via M106)" disabled/>
														</div>
													</td>
												</tr>
												<tr data-fan="6" class="hidden">
													<td>
														<button class="btn btn-primary btn-sm active fan-visibility">Fan 6</button>
													</td>
													<td>
														<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
															<span class="glyphicon glyphicon-pushpin"></span>
														</button>
													</td>
													<td>
														<div class="fan-slider" data-slideout-ignore>
															<input id="slider_fan_job_6" type="text" title="Set current fan value (via M106)" disabled/>
														</div>
													</td>
												</tr>
												<tr data-fan="7" class="hidden">
													<td>
														<button class="btn btn-primary btn-sm active fan-visibility">Fan 7</button>
													</td>
													<td>
														<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
															<span class="glyphicon glyphicon-pushpin"></span>
														</button>
													</td>
													<td>
														<div class="fan-slider" data-slideout-ignore>
															<input id="slider_fan_job_7" type="text" title="Set current fan value (via M106)" disabled/>
														</div>
													</td>
												</tr>
												<tr data-fan="8" class="hidden">
													<td>
														<button class="btn btn-primary btn-sm active fan-visibility">Fan 8</button>
													</td>
													<td>
														<button class="btn btn-default btn-sm disabled fan-override" title="Override Fan Value">
															<span class="glyphicon glyphicon-pushpin"></span>
														</button>
													</td>
													<td>
														<div class="fan-slider" data-slideout-ignore>
															<input id="slider_fan_job_8" type="text" title="Set current fan value (via M106)" disabled/>
														</div>
													</td>
												</tr>
											</table>
										</div>
									</div>

									<div class="panel panel-default">
										<div class="panel-heading">
											<span>Speed Factor</span>
										</div>
										<div class="panel-body">
											<div class="slider-container" data-slideout-ignore>
												<input id="slider_speed" type="text" title="Set speed factor (via M220)"/>
											</div>
										</div>
									</div>
								</div>

								<div class="col-xs-8 col-sm-6 col-md-3 col-lg-3 col-right">
									<div id="panel_extrusion_factors" class="panel panel-default">
										<div class="panel-heading">
											<span>Extrusion Factors</span>
										</div>
										<div class="panel-body">
											<table class="table-description">
												<tr class="extr-0">
													<td>Extruder 0:</td>
													<td class="slider-container" data-slideout-ignore>
														<input id="slider_extr_0" type="text" title="Set extrude factor override (via M221)" data-drive="0"/>
													</td>
												</tr>
												<tr class="extr-1">
													<td>Extruder 1:</td>
													<td class="slider-container" data-slideout-ignore>
														<input id="slider_extr_1" type="text" title="Set extrude factor override (via M221)" data-drive="1"/>
													</td>
												</tr>
												<tr class="extr-2">
													<td>Extruder 2:</td>
													<td class="slider-container" data-slideout-ignore>
														<input id="slider_extr_2" type="text" title="Set extrude factor override (via M221)" data-drive="2"/>
													</td>
												</tr>
												<tr class="extr-3">
													<td>Extruder 3:</td>
													<td class="slider-container" data-slideout-ignore>
														<input id="slider_extr_3" type="text" title="Set extrude factor override (via M221)" data-drive="3"/>
													</td>
												</tr>
												<tr class="extr-4">
													<td>Extruder 4:</td>
													<td class="slider-container" data-slideout-ignore>
														<input id="slider_extr_4" type="text" title="Set extrude factor override (via M221)" data-drive="4"/>
													</td>
												</tr>
												<tr class="extr-5">
													<td>Extruder 5:</td>
													<td class="slider-container" data-slideout-ignore>
														<input id="slider_extr_5" type="text" title="Set extrude factor override (via M221)" data-drive="5"/>
													</td>
												</tr>
												<tr class="extr-6">
													<td>Extruder 6:</td>
													<td class="slider-container" data-slideout-ignore>
														<input id="slider_extr_6" type="text" title="Set extrude factor override (via M221)" data-drive="6"/>
													</td>
												</tr>
												<tr class="extr-7">
													<td>Extruder 7:</td>
													<td class="slider-container" data-slideout-ignore>
														<input id="slider_extr_7" type="text" title="Set extrude factor override (via M221)" data-drive="7"/>
													</td>
												</tr>
												<tr class="extr-8">
													<td>Extruder 8:</td>
													<td class="slider-container" data-slideout-ignore>
														<input id="slider_extr_8" type="text" title="Set extrude factor override (via M221)" data-drive="8"/>
													</td>
												</tr>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- Scanner -->
						<div id="page_scanner" class="page">
							<div class="row">
								<div class="col-md-12">
									<table id="table_scan_files_directory" class="table-file-navigation">
										<tr>
											<td class="diabase hidden">
												<button class="btn btn-success disabled" data-gcode="M98 P&quot;scanner_go.g&quot;"><span class="glyphicon glyphicon-home"></span> Go to Scan Location</button>
											</td>
											<td>
												<button id="btn_calibrate_scanner" class="btn btn-success disabled"><span class="glyphicon glyphicon-screenshot"></span> Calibrate</button>
											</td>
											<td>
												<button id="btn_start_scan" class="btn btn-primary disabled"><span class="glyphicon glyphicon glyphicon-eye-open"></span> Start Scan</button>
											</td>
											<td>
												<ol class="breadcrumb breadcrumb-directory" id="ol_scan_directory">
													<li class="active content"><span class="glyphicon glyphicon-folder-open"></span> Scans Directory</li>
												</ol>
											</td>
											<td class="diabase hidden hidden-xs hidden-sm">
												<button id="btn_shutdown_scanner" class="btn btn-danger disabled" data-gcode="M756"><span class="glyphicon glyphicon glyphicon-off"></span> Shutdown Scanner</button>
											</td>
										</tr>
									</table>

									<h1 class="text-center text-muted">Connect to your Duet to display scanned files</h1>

									<table class="table table-bordered table-files table-hover table-striped hidden" id="table_scan_files">
										<thead>
											<tr>
												<th><!-- see JS --></th>
												<th>File Name</th>
												<th>Size</th>
												<th>Date Created</th>
											</tr>
										</thead>
										<tbody>
											<!-- see JS -->
										</tbody>
									</table>
								</div>
							</div>
						</div>

						<!-- G-Code Console -->
						<div id="page_console" class="page">
							<div class="row">
								<form class="gcode-input" autocomplete="off">
									<div class="col-md-12">
										<div class="input-group">
											<span class="input-group-addon">
												<a href="https://duet3d.dozuki.com/Wiki/Gcode" target="_blank">?</a>
											</span>
											<input type="text" name="gcode" class="form-control typeahead" placeholder="Send G-Code..." data-provide="typeahead" disabled>
											<div class="input-group-btn">
												<button type="submit" class="btn btn-primary disabled" title="Send G-Code from input"><span class="glyphicon glyphicon-send"></span> Send</button>
												<button class="btn btn-default" id="btn_clear_log" title="Clear G-Code Console"><span class="glyphicon glyphicon-trash"></span> Clear Log</button>
												<button type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown"><span class="glyphicon glyphicon-floppy-save"></span> Download as <span class="caret"></span></button>
												<ul class="dropdown-menu dropdown-menu-right">
													<li><a id="a_download_text" href="#"><span class="glyphicon glyphicon-align-justify"></span> Text</a></li>
													<li><a id="a_download_csv" href="#"><span class="glyphicon glyphicon-list"></span> CSV</a></li>
												</ul>
											</div>
										</div>
									</div>
								</form>
							</div>

							<div class="row">
								<div class="col-md-12">
									<div class="container-fluid" id="console_log">
									</div>
								</div>
							</div>
						</div>

						<!-- G-Code Files -->
						<div id="page_files" class="page">
							<div class="row">
								<div class="col-md-12">
									<table id="table_gcode_files_directory" class="table-file-navigation">
										<tr>
											<td id="td_volume" class="hidden hidden-xs">
												<div class="dropdown">
													<button id="btn_volume" class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">
														<span class="glyphicon glyphicon-hdd"></span> <span class="content">SD Card 0</span> <span class="caret"></span>
													</button>
													<ul class="dropdown-menu" id="ul_volumes">
														<li>
															<a href="#" data-volume="0">
																<span class="glyphicon glyphicon-ok text-success"></span> SD Card 0 (mounted)
															</a>
														</li>
														<li>
															<a href="#" data-volume="1">
																<span class="glyphicon glyphicon-remove text-danger"></span> SD Card 1 (not mounted)
															</a>
														</li>
													</ul>
												</div>
											</td>
											<td>
												<ol class="breadcrumb breadcrumb-directory" id="ol_gcode_directory">
													<li class="active content"><span class="glyphicon glyphicon-folder-open"></span> G-Codes Directory</li>
													<li class="pull-right"><span class="glyphicon glyphicon-level-up"></span> Go Up</li>
												</ol>
											</td>
											<td class="hidden-xs hidden-sm hidden online-control">
												<button class="btn btn-primary btn-upload disabled" title="Upload one or more G-Code files (drag&amp;drop is supported as well)" data-type="gcode" data-style="btn-primary"><span class="glyphicon glyphicon-cloud-upload"></span> Upload G-Code File(s)</button>
											</td>
											<td class="hidden-xs hidden-sm hidden online-control">
												<button class="btn btn-info" id="btn_new_gcode_directory" title="Create a new directory"><span class="glyphicon glyphicon-folder-open"></span> Make new Directory</button>
											</td>
										</tr>
									</table>

									<h1 class="text-center text-muted">Connect to your Duet to display G-Code files</h1>

									<table class="table table-bordered table-files table-hover table-striped hidden" id="table_gcode_files">
										<thead>
											<tr>
												<th><input type="checkbox"></th>
												<th><a href="#" data-attribute="filename">File Name</a> <span class="glyphicon glyphicon-sort-by-alphabet"></span></th>
												<th class="hidden-xs"><a href="#" data-attribute="size">Size</a> <span></span></th>
												<th class="hidden-xs hidden-sm"><a href="#" data-attribute="last-modified">Last modified</a> <span></span></th>
												<th><a href="#" data-attribute="object-height">Object Height</a> <span></span></th>
												<th class="hidden-xs"><a href="#" data-attribute="layer-height">Layer Height</a> <span></span></th>
												<th><a href="#" data-attribute="filament-usage">Filament Usage</a> <span></span></th>
												<th class="hidden-xs hidden-sm"><a href="#" data-attribute="generated-by">Generated by</a> <span></span></th>
											</tr>
										</thead>
										<tbody>
											<!-- see JS -->
										</tbody>
									</table>

									<div class="row visible-xs visible-sm">
										<div class="col-md-12 text-center hidden online-control">
											<button class="btn btn-primary btn-upload" title="Upload one or more G-Code files (drag&amp;drop is supported as well)" data-type="gcode" data-style="btn-primary"><span class="glyphicon glyphicon-cloud-upload"></span> Upload G-Code File(s)</button>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- Macro Files -->
						<div id="page_macros" class="page">
							<div class="row">
								<div class="col-md-12">
									<table class="table-file-navigation">
										<tr>
											<td>
												<ol class="breadcrumb breadcrumb-directory" id="ol_macro_directory">
													<li class="active"><span class="glyphicon glyphicon-folder-open"></span> Macros Directory</li>
													<li class="pull-right"><span class="glyphicon glyphicon-level-up"></span> Go Up</li>
												</ol>
											</td>
											<td class="hidden-xs hidden-sm hidden online-control">
												<button class="btn btn-primary btn-upload disabled" title="Upload one or more macro files (drag&amp;drop is supported as well)" data-type="macro" data-style="btn-primary"><span class="glyphicon glyphicon-cloud-upload"></span> Upload Macro File(s)</button>
											</td>
											<td class="hidden online-control">
												<div class="btn-group">
													<button type="button" class="btn btn-info dropdown-toggle online-control hidden" data-toggle="dropdown">
														<span class="glyphicon glyphicon-plus"></span> Make new... <span class="caret"></span>
													</button>
													<ul class="dropdown-menu dropdown-menu-right">
														<li><a href="#" id="a_new_macro_directory" title="Create a new directory"><span class="glyphicon glyphicon-folder-open"></span> Directory</a></li>
														<li><a href="#" id="a_new_macro_file" title="Create a new macro file"><span class="glyphicon glyphicon-file"></span> Macro</a></li>
													</ul>
												</div>
											</td>
										</tr>
									</table>

									<h1 class="text-center text-muted">Connect to your Duet to display Macro files</h1>

									<table class="table table-bordered table-files table-hover table-striped hidden" id="table_macro_files">
										<thead>
											<tr>
												<th><input type="checkbox"></th>
												<th><a href="#" data-attribute="filename">File Name</a> <span class="glyphicon glyphicon-sort-by-alphabet"></span></th>
												<th><a href="#" data-attribute="size">Size</a> <span></span></th>
												<th><a href="#" data-attribute="last-modified">Last modified</a> <span></span></th>
											</tr>
										</thead>
										<tbody>
											<!-- see JS -->
										</tbody>
									</table>

									<div class="row visible-xs visible-sm">
										<div class="col-md-12 text-center hidden online-control">
											<button class="btn btn-primary btn-upload" title="Upload one or more macro files (drag&amp;drop is supported as well)" data-type="macro" data-style="btn-primary"><span class="glyphicon glyphicon-cloud-upload"></span> Upload Macro File(s)</button>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- Filaments -->
						<div id="page_filaments" class="page">
							<div class="row">
								<div class="col-md-12">
									<table class="table-file-navigation">
										<tr>
											<td>
												<ol class="breadcrumb breadcrumb-directory" id="ol_filament">
													<li class="active"><span class="glyphicon glyphicon-folder-open"></span> Filaments Directory</li>
												</ol>
											</td>

											<td class="hidden-xs hidden-sm hidden online-control">
												<button class="btn btn-primary btn-upload disabled" title="Upload one or more filament configurations (drag&amp;drop is supported as well)" data-type="filament" data-style="btn-primary"><span class="glyphicon glyphicon-cloud-upload"></span> Upload Configuration(s)</button>
											</td>
											<td class="hidden online-control">
												<button class="btn btn-info" id="btn_new_filament" title="Create a new filament configuration"><span class="glyphicon glyphicon-plus"></span> Create new Filament</button>
											</td>
										</tr>
									</table>

									<h1 class="text-center text-muted">Connect to your Duet to display Filaments</h1>

									<table class="table table-bordered table-files table-hover table-striped hidden" id="table_filaments">
										<thead>
											<tr>
												<th><input type="checkbox"></th>
												<th><a href="#" data-attribute="filament">Filament Name</a> <span class="glyphicon glyphicon-sort-by-alphabet"></span></th>
												<th><a href="#" data-attribute="date-created">Date Created</a> <span></span></th>
											</tr>
										</thead>
										<tbody>
											<!-- see JS -->
										</tbody>
									</table>
								</div>
							</div>
						</div>

						<!-- Calibration -->
						<div id="page_calibration" class="page">
							<div class="row">
								<div class="col-md-8">
									<div id="div_webcam_calibration" class="panel panel-default hidden">
										<div class="panel-heading">Live Stream</div>
										<div class="panel-body">
											<img id="img_crosshair" src="about:blank" alt="(crosshair not available)">

											<img id="img_webcam_calibration" src="about:blank" alt="(image not available)">
											<div id="div_ifm_webcam_calibration" class="embed-responsive embed-responsive-16by9 hidden">
												<iframe src="about:blank" id="ifm_webcam_calibration" class="embed-responsive-item"></iframe>
											</div>
										</div>
									</div>

									<div class="panel panel-default" id=panel_offset>
										<div class="panel-heading">
											<span>Tool Offsets</span>
											<span class="pull-right"><a href="#" id="a_refresh_tool_offsets"><span class="glyphicon glyphicon-refresh"></span> Refresh</a></span>
										</div>
										<table id="table_calibration_tools" class="table table-striped">
											<thead>
												<tr>
													<th>Name</th>
													<th>X</th>
													<th>Y</th>
													<th>Z</th>
													<th></th>
													<th></th>
												</tr>
											</thead>
											<tbody>
												<!-- Filled by JS -->
											</tbody>
										</table>
										<div class="panel-body">
											<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 no-horizontal-padding" id="div_offsets">
												<label>Offset amount in mm:</label>
												<div class="btn-group btn-group-justified" data-toggle="buttons">
													<label class="btn btn-default">
														<input type="radio" name="offset" value="10">
														<span>10</span>
													</label>
													<label class="btn btn-default">
														<input type="radio" name="offset" value="5">
														<span>5</span>
													</label>
													<label class="btn btn-default">
														<input type="radio" name="offset" value="2">
														<span>2</span>
													</label>
													<label class="btn btn-default">
														<input type="radio" name="offset" value="1">
														<span>1</span>
													</label>
													<label class="btn btn-default">
														<input type="radio" name="offset" value="0.1">
														<span>0.1</span>
													</label>
													<label class="btn btn-primary active">
														<input type="radio" name="offset" value="0.01" checked>
														<span>0.01</span>
													</label>
												</div>
											</div>
										</div>
									</div>
									<div class="panel panel-default" id="panel_workpiece_probing">
										<div class="panel-heading">
											<span>Probe Workpiece</span>
										</div>
										<div class="panel-body">
											<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 no-horizontal-padding" id="div_workpiece_probing">
												<label>Start probing from (and move)</label>
												<div class="btn-group btn-group-justified" data-toggle="buttons">
													<div class="btn-group">
														<button type="button" class="btn btn-default btn-workpiece-probe" data-axis-letter="X" data-dir="max" title="Probe towards X max"><span>-X</span> (<span class="glyphicon glyphicon-arrow-right"></span>)</button>
													</div>
													<div class="btn-group">
														<button type="button" class="btn btn-default btn-workpiece-probe" data-axis-letter="X" data-dir="min" title="Probe towards X min"><span>X</span> (<span class="glyphicon glyphicon-arrow-left"></span>)</button>
													</div>
													<div class="btn-group">
														<button type="button" class="btn btn-default btn-workpiece-probe" data-axis-letter="Y" data-dir="max" title="Probe towards Y max"><span>-Y</span> (<span class="glyphicon glyphicon-arrow-up"></span>)</button>
													</div>
													<div class="btn-group">
														<button type="button" class="btn btn-default btn-workpiece-probe" data-axis-letter="Y" data-dir="min" title="Probe towards Y min"><span>Y</span> (<span class="glyphicon glyphicon-arrow-down"></span>)</button>
													</div>
													<div class="btn-group">
														<button type="button" class="btn btn-default btn-workpiece-probe" data-axis-letter="Z" data-dir="min" title="Probe towards Z min"><span>Z</span> (<span class="glyphicon glyphicon-arrow-down">)</span></button>
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="panel panel-default" id="panel_workspace_coordinates">
										<div class="panel-heading">
											<span>Workplace Coordinate Offsets (click to edit)</span>
											<span class="pull-right"><a href="#" id="a_refresh_wcs"><span class="glyphicon glyphicon-refresh"></span> Refresh</a></span>
										</div>
										<table id="table_workspace_coordinates" class="table table-striped">
											<thead>
												<tr>
													<th>Workspace</th>
													<th>X</th>
													<th>Y</th>
													<th>Z</th>
												</tr>
											</thead>
											<tbody>
												<tr data-wcs="1">
													<td>G54</td>
													<td><span data-axis="X" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Y" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Z" class="wcs-cell">0.00</span> mm</td>
												</tr>
												<tr data-wcs="2">
													<td>G55</td>
													<td><span data-axis="X" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Y" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Z" class="wcs-cell">0.00</span> mm</td>
												</tr>
												<tr data-wcs="3">
													<td>G56</td>
													<td><span data-axis="X" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Y" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Z" class="wcs-cell">0.00</span> mm</td>
												</tr>
												<tr data-wcs="4">
													<td>G57</td>
													<td><span data-axis="X" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Y" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Z" class="wcs-cell">0.00</span> mm</td>
												</tr>
												<tr data-wcs="5">
													<td>G58</td>
													<td><span data-axis="X" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Y" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Z" class="wcs-cell">0.00</span> mm</td>
												</tr>
												<tr data-wcs="6">
													<td>G59</td>
													<td><span data-axis="X" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Y" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Z" class="wcs-cell">0.00</span> mm</td>
												</tr>
												<tr data-wcs="7">
													<td>G59.1</td>
													<td><span data-axis="X" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Y" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Z" class="wcs-cell">0.00</span> mm</td>
												</tr>
												<tr data-wcs="8">
													<td>G59.2</td>
													<td><span data-axis="X" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Y" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Z" class="wcs-cell">0.00</span> mm</td>
												</tr>
												<tr data-wcs="9">
													<td>G59.3</td>
													<td><span data-axis="X" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Y" class="wcs-cell">0.00</span> mm</td>
													<td><span data-axis="Z" class="wcs-cell">0.00</span> mm</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>

								<div class="col-md-4">
									<div class="panel panel-default">
										<div class="panel-heading">
											<span>Axis Orientation</span>
										</div>

										<div class="panel-body">
											<img id="img_calibration_diagram" src="about:blank" alt="(calibration diagram)" class="img-responsive">
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- Settings -->
						<div id="page_settings" class="page">
							<form id="frm_settings">
								<!-- Page Selector (Desktop) -->
								<ul class="nav nav-tabs hidden-xs hidden-sm">
									<li class="active"><a href="#page_general" data-toggle="tab">General</a></li>
									<li><a href="#page_ui" data-toggle="tab">User Interface</a></li>
									<li><a href="#page_listitems" data-toggle="tab">List Items</a></li>
									<li><a href="#page_sysedit" data-toggle="tab">System Editor</a></li>
									<li class="li-display hidden"><a href="#page_display" data-toggle="tab">Display Editor</a></li>
									<li><a href="#page_machine" data-toggle="tab">Machine Properties</a></li>
									<li><a href="#page_tools" data-toggle="tab">Tools</a></li>
								</ul>

								<!-- Page Selector (Mobile) -->
								<ul class="nav nav-tabs visible-xs visible-sm">
									<li class="active"><a href="#page_general" data-toggle="tab">General</a></li>
									<li><a href="#page_ui" data-toggle="tab">User Interface</a></li>
									<li><a href="#page_listitems" data-toggle="tab">List Items</a></li>
									<li>
										<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
										<ul class="dropdown-menu dropdown-menu-right" id="collapsed">
											<li><a href="#page_sysedit" data-toggle="tab">System Editor</a></li>
											<li class="li-display hidden"><a href="#page_display" data-toggle="tab">Display Editor</a></li>
											<li><a href="#page_machine" data-toggle="tab">Machine Properties</a></li>
											<li><a href="#page_tools" data-toggle="tab">Tools</a></li>
										</ul>
									</li>
								</ul>

								<div class="tab-content well well-sm">
									<!-- General Settings -->
									<div class="tab-pane row active" id="page_general">
										<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-left">
											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Software Information</span>
												</div>
												<div class="panel-body">
													<table id="software_info">
														<tr>
															<th>Firmware Name:</th>
															<td id="firmware_name">n/a</td>
														</tr>
														<tr id="tr_firmware_electronics" class="hidden">
															<th>Firmware Electronics:</th>
															<td id="firmware_electronics">n/a</td>
														</tr>
														<tr>
															<th>Firmware Version:</th>
															<td id="firmware_version">n/a</td>
														</tr>
														<tr class="wifi-setting hidden">
															<th>WiFi Server Version:</th>
															<td id="dws_version">n/a</td>
														</tr>
														<tr>
															<th>Web Interface Version:</th>
															<td id="dwc_version">1.22.7-diabase</td>
														</tr>
													</table>
													<span id="span_copyright">Web Interface by Christian Hammacher<br/>Licensed under the terms of the <a href="https://www.gnu.org/licenses/gpl-3.0" target="blank">GPL v3</a></span>
												</div>
											</div>

											<div class="panel panel-default hidden-xs hidden-sm">
												<div class="panel-heading">
													<span>File Upload for /sys and /www Directories</span>
												</div>
												<div class="panel-body">
													<div class="btn-group-justified">
														<div class="btn-group">
															<button class="btn btn-lg btn-info btn-upload disabled" title="Upload one or more files to the /sys or /www directory (drag&amp;drop is supported as well)" data-type="generic" data-style="btn-info"><span class="glyphicon glyphicon-cloud-upload"></span>  Upload File(s)</button>
														</div>
													</div>

													<p id="p_uploadinfo" class="text-muted">Here you can upload firmware, Duet WiFi and Duet Web Control files as well</p>
												</div>
											</div>
										</div>

										<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Communication</span>
												</div>

												<div class="panel-body">
													<label for="input_update_interval">Status Update Interval:</label>
													<div class="input-group">
														<input type="number" id="input_update_interval" class="form-control" title="Interval at which status updates are requested" data-setting="updateInterval" data-min="50">
														<span class="input-group-addon">ms</span>
													</div>

													<label for="input_extended_status_interval">Extended Status Update after every:</label>
													<div class="input-group">
														<input type="number" id="input_extended_status_interval" class="form-control" title="Extended status updates are requested after each n-th status response" data-setting="extendedStatusInterval" data-min="1">
														<span class="input-group-addon">th response</span>
													</div>

													<label for="input_max_retries">Maximum number of AJAX retries:</label>
													<input type="number" id="input_max_retries" class="form-control" title="Maximum number of AJAX retries before the connection is terminated" data-setting="maxRetries" data-min="0" data-max="50">
												</div>
											</div>
										</div>

										<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-right">
											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Reconnect Preferences</span>
												</div>

												<div class="panel-body">
													<label for="input_reconnect_halt_delay">Reconnect Delay on Halt:</label>
													<div class="input-group">
														<input type="number" id="input_reconnect_halt_delay" class="form-control" title="Time to wait for a reconnect after an emergency stop was reported" data-setting="haltedReconnectDelay" data-factor="1000">
														<span class="input-group-addon">s</span>
													</div>

													<label for="input_reconnect_update_delay">Reconnect Delay on Firmware Update:</label>
													<div class="input-group">
														<input type="number" id="input_reconnect_update_delay" class="form-control" title="Time to wait for a reconnect when a new firmware is about to be flashed" data-setting="updateReconnectDelay" data-factor="1000">
														<span class="input-group-addon">s</span>
													</div>

													<label for="input_reconnect_dws_delay" class="wifi-setting">Reconnect Delay on Duet WiFi Server Update:</label>
													<div class="input-group wifi-setting">
														<input type="number" id="input_reconnect_dws_delay" class="form-control" title="Time to wait for a reconnect when a new Duet WiFi Server firmware is about to be flashed (Duet WiFi only)" data-setting="dwsReconnectDelay" data-factor="1000">
														<span class="input-group-addon">s</span>
													</div>

													<label for="input_reconnect_dwc_delay" class="wifi-setting">Reconnect Delay on Duet Web Control Update:</label>
													<div class="input-group wifi-setting">
														<input type="number" id="input_reconnect_dwc_delay" class="form-control" title="Time to wait for a reconnect when a new Duet Web Control binary is about to be flashed (Duet WiFi only)" data-setting="dwcReconnectDelay" data-factor="1000">
														<span class="input-group-addon">s</span>
													</div>
												</div>
											</div>
										</div>
									</div>

									<!-- User Interface -->
									<div class="tab-pane row" id="page_ui">
										<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-left">
											<div class="panel panel-default">
												<div class="panel-heading">
													<span>General</span>
												</div>

												<div class="panel-body">
													<div class="checkbox">
														<label title="Always show the connect button on remote connections">
															<input type="checkbox" data-setting="showConnect" /> Show Connect button
														</label>
													</div>

													<div class="checkbox">
														<label title="Display file sizes with a base of 1024 instead of 1000">
															<input type="checkbox" data-setting="useKiB" /> Display File Sizes with Binary Prefix
														</label>
													</div>

													<div class="checkbox hidden-xs hidden-sm">
														<label title="Turning on this option ensures the info area and the main menu are always shown on larger displays. This option has no effect on small devices">
															<input type="checkbox" data-setting="scrollContent" /> Always show info area and main menu
														</label>
													</div>

													<div class="checkbox">
														<label title="Show Fan Sliders allowing you to control the Fan Outputs">
															<input type="checkbox" data-setting="showFanControl" checked /> Show Fan Controls
														</label>
													</div>

													<div class="checkbox">
														<label title="Display fan RPM of a 4-pin PWM cooling fan in the sensors area">
															<input type="checkbox" data-setting="showFanRPM" checked /> Show Fan RPM in Sensors
														</label>
													</div>

													<div class="checkbox">
														<label title="Store the settings of Duet Web Control for each device on the Duet">
															<input type="checkbox" data-setting="settingsOnDuet" checked /> Store Web Interface Settings on the Duet
														</label>
													</div>

													<div class="row">
														<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
															<label id="label_language">Language:</label>
															<div class="dropdown" id="dropdown_language">
																<button class="btn btn-default dropdown-toggle" type="button" id="btn_language" data-language="en" data-toggle="dropdown">
																	<span>English</span>
																	<span class="caret"></span>
																</button>
																<ul class="dropdown-menu">
																	<li><a data-language="en" href="#">English</a></li>
																</ul>
															</div>
														</div>
														<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
															<label>Theme:</label>
															<div class="dropdown" id="dropdown_theme">
																<button class="btn btn-default dropdown-toggle" type="button" id="btn_theme" data-theme="default" data-toggle="dropdown">
																	<span>Bootstrap</span>
																	<span class="caret"></span>
																</button>
																<ul class="dropdown-menu">
																	<li><a data-theme="default" href="#">Bootstrap</a></li>
																	<li><a data-theme="none" href="#">None</a></li>
																</ul>
															</div>
														</div>
													</div>
												</div>
											</div>

											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Machine Control</span>
												</div>

												<div class="panel-body">
													<div class="row">
														<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
															<label for="input_move_feedrate">Default Move Button Feedrate:</label>
															<div class="input-group">
																<input type="number" id="input_move_feedrate" class="form-control" title="Default Feedrate for Head Movement controls" data-setting="moveFeedrate" data-min="60" data-factor="60">
																<span class="input-group-addon">mm/s</span>
															</div>
														</div>

														<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
															<label for="input_babystepping_z">Z Distance per Babystep:</label>
															<div class="input-group">
																<input type="number" id="input_babystepping_z" class="form-control" title="Default Z Amount per Babystep" data-setting="babysteppingZ" data-min="0" data-max="1">
																<span class="input-group-addon">mm</span>
															</div>
														</div>
													</div>

													<div class="checkbox">
														<label title="Confirm emergency stop by displaying a message box">
															<input type="checkbox" data-setting="confirmStop" /> Confirm Emergency STOP
														</label>
													</div>

													<div class="checkbox">
														<label title="Show a small panel on the Control page to toggle ATX power">
															<input type="checkbox" data-setting="showATXControl" checked /> Show ATX Power control
														</label>
													</div>
												</div>
											</div>
										</div>

										<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
											<div class="panel panel-default" id="panel_tool_changes">
												<div class="panel-heading">
													<span>Tool Changes</span>
												</div>

												<div class="panel-body">
													<div class="row">
														<div class="col-md-4">
															<div class="checkbox">
																<label title="Run tfree*.g macro when the current tool is changed via the web interface">
																	<input type="checkbox" data-setting="doTfree" checked /> Run free macro
																</label>
															</div>
														</div>

														<div class="col-md-4">
															<div class="checkbox">
																<label title="Run tpre*.g macro when the current tool is changed via the web interface">
																	<input type="checkbox" data-setting="doTpre" checked /> Run pre macro
																</label>
															</div>
														</div>

														<div class="col-md-4">
															<div class="checkbox">
																<label title="Run tpost*.g macro when the current tool is changed via the web interface">
																	<input type="checkbox" data-setting="doTpost" checked /> Run post macro
																</label>
															</div>
														</div>
													</div>
												</div>
											</div>

											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Notifications</span>
												</div>

												<div class="panel-body">
													<div class="checkbox">
														<label title="Show HTML5 desktop notifications when the web interface is not visible">
															<input type="checkbox" data-setting="useHtmlNotifications" /> Use HTML5-based desktop notifications when the page is hidden
														</label>
													</div>
													<div class="checkbox">
														<label title="Activate this to display M117 messages only for a certain time span">
															<input type="checkbox" data-setting="autoCloseUserMessages" checked /> Automatically close user-generated firmware messages
														</label>
													</div>
													<div class="checkbox">
														<label title="Activate this to automatically close error messages">
															<input type="checkbox" data-setting="autoCloseErrorMessages" checked /> Automatically close error messages
														</label>
													</div>

													<label>Show Pop-Up Notifications for:</label>
													<div class="well well-sm">
														<div class="checkbox" id="div_show_empty_responses">
															<label title="Show a pop-up notification when the firmware reports that a code from the web interface has completed">
																<input type="checkbox" data-setting="showEmptyResponses" checked /> Codes that Completed without a Response
															</label>
														</div>
														<div class="row">
															<div class="col-md-4">
																<div class="checkbox">
																	<label title="Show pop-up notifications for info messages">
																		<input type="checkbox" data-setting="showInfoMessages" checked /> Info Messages
																	</label>
																</div>
															</div>
															<div class="col-md-4">
																<div class="checkbox">
																	<label title="Show pop-up notifications for warning messages">
																		<input type="checkbox" data-setting="showWarningMessages" checked /> Warnings
																	</label>
																</div>
															</div>
															<div class="col-md-4">
																<div class="checkbox">
																	<label title="Show pop-up notifications for error messages">
																		<input type="checkbox" data-setting="showErrorMessages" checked /> Errors
																	</label>
																</div>
															</div>
														</div>
													</div>

													<div class="row">
														<div class="col-md-6">
															<label for="input_notification_timeout">Default Notification Timeout:</label>
															<div class="input-group">
																<input type="number" id="input_notification_timeout" class="form-control" step="any" title="Time after which default notifications are automatically closed" data-setting="notificationTimeout" data-factor="1000">
																<span class="input-group-addon">s</span>
															</div>
														</div>
														<div class="col-md-6">
															<label for="input_max_notifications">Max. number of notifications:</label>
															<input type="number" id="input_max_notifications" class="form-control" step="1" title="Maximum number of simultaneously displayed notification pop-ups" data-setting="maxNotifications">
														</div>
													</div>
												</div>
											</div>
										</div>

										<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-right">
											<div class="panel panel-default">
												<div class="panel-heading">
													<span>G-Codes</span>
												</div>

												<div class="panel-body">
													<div class="checkbox">
														<label title="Convert every G-Code to Upper-Case before sending them">
															<input type="checkbox" data-setting="uppercaseGCode" checked /> Always Convert G-Codes to Upper-Case
														</label>
													</div>

													<button id="btn_clear_cache" class="btn btn-danger" title="Clear cached G-Code File Information"><span class="glyphicon glyphicon-trash"></span> Clear Cached File Information</button>
												</div>
											</div>

											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Webcam Integration</span>
												</div>
												<div class="panel-body">
													<label for="input_webcam_url">Optional URL to an external Webcam:</label>
													<input id="input_webcam_url" class="form-control" type="text" placeholder="(not set)" title="URL must point to an image file" data-setting="webcamURL">

													<label for="input_webcam_interval">Webcam Update Interval:</label>
													<div class="input-group">
														<input type="number" id="input_webcam_interval" class="form-control" title="Interval at which the webcam image on the Print Status page will be updated" data-setting="webcamInterval" data-min="0" data-factor="1000">
														<span class="input-group-addon">s</span>
													</div>

													<div class="checkbox">
														<label title="Enable this option if your webcam cannot handle additional HTTP keys. Some IP cameras need this">
															<input type="checkbox" data-setting="webcamFix" /> Do not append extra HTTP qualifier
														</label>
													</div>

													<div class="checkbox">
														<label title="Enable this option if you need to embed a page using an iframe to display a webcam stream">
															<input type="checkbox" data-setting="webcamEmbedded" /> Embed Webcam Stream
														</label>
													</div>

													<div class="row">
														<div class="col-md-6">
															<label for="select_webcam_rotation">Rotation angle:</label>
															<select id="select_webcam_rotation" class="form-control" data-setting="webcamRotation">
																<option value="0" selected>0°</option>
																<option value="90">90°</option>
																<option value="180">180°</option>
																<option value="270">270°</option>
															</select>
														</div>

														<div class="col-md-6">
															<label for="select_webcam_flip">Flip image:</label>
															<select id="select_webcam_flip" class="form-control" data-setting="webcamFlip">
																<option value="none" selected>No</option>
																<option value="x">Flip X</option>
																<option value="y">Flip Y</option>
																<option value="both">Flip both</option>
															</select>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>

									<!-- List Items -->
									<div class="tab-pane row" id="page_listitems">
										<div class="col-md-4 col-lg-4 col-left">
											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Default G-Codes</span>
												</div>
												<table class="table table-striped" id="table_gcodes">
													<thead>
														<tr>
															<th>G-Code</th>
															<th></th>
														</tr>
													</thead>
													<tbody>
														<!-- see JS -->
													</tbody>
												</table>
											</div>
										</div>

										<div class="col-md-4 col-lg-5">
											<div class="panel panel-default" id="panel_head_temps">
												<div class="panel-heading">
													<span>Default Heater Temperatures</span>
												</div>
												<div class="panel-body">
													<label>Which temperatures do you want to manage?</label>
													<div class="radio">
														<label>
															<input type="radio" name="temp_selection" value="active" checked>Active Temperatures
														</label>
													</div>
													<div class="radio">
														<label>
															<input type="radio" name="temp_selection" value="standby">Standby Temperatures
														</label>
													</div>

													<ul class="list-group temp-list" id="ul_active_temps"></ul>

													<ul class="list-group temp-list hidden" id="ul_standby_temps"></ul>
												</div>
											</div>

											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Add new Temperature</span>
												</div>
												<div class="panel-body">
													<table class="table-add-temp">
														<tr>
															<td>
																<label for="input_add_head_temp">Temperature:</label>
																<div class="input-group">
																	<input type="number" class="form-control" id="input_add_head_temp">
																	<span class="input-group-addon">°C</span>
																</div>
															</td>
															<td>
																<button class="btn btn-success disabled" id="btn_add_head_temp" title="Add new temperature item"><span class="glyphicon glyphicon-plus"></span> Add Temp</button>
															</td>
														</tr>
													</table>
												</div>
											</div>
										</div>
										<div class="col-md-4 col-lg-3 col-right">
											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Default Bed and Chamber Temperatures</span>
												</div>
												<div class="panel-body">
													<ul class="list-group temp-list" id="ul_bed_temps"></ul>
												</div>
											</div>

											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Add new Temperature</span>
												</div>
												<div class="panel-body">
													<table class="table-add-temp">
														<tr>
															<td>
																<label for="input_add_bed_temp">Temperature:</label>
																<div class="input-group">
																	<input type="number" class="form-control" id="input_add_bed_temp">
																	<span class="input-group-addon">°C</span>
																</div>
															</td>
															<td>
																<button class="btn btn-success disabled" id="btn_add_bed_temp"><span class="glyphicon glyphicon-plus" title="Add new temperature item"></span> Add Temp</button>
															</td>
														</tr>
													</table>
												</div>
											</div>
										</div>
									</div>

									<!-- System Editor -->
									<div class="tab-pane" id="page_sysedit">
										<ol id="ol_sys_directory" class="breadcrumb breadcrumb-directory">
											<li class="active"><span class="glyphicon glyphicon-folder-open"></span> System Directory</li>
											<li class="pull-right hidden online-control"><a href="#" id="a_refresh_sys"><span class="glyphicon glyphicon-refresh"></span> Refresh</a></li>
											<li class="pull-right hidden online-control"><a href="#" id="a_new_sys_file"><span class="glyphicon glyphicon-file"></span> New File</a></li>
										</ol>

										<h1 class="text-center text-muted">Connect to your Duet to display System files</h1>

										<table class="table table-bordered table-files table-hover table-striped hidden" id="table_sys_files">
											<thead>
												<tr>
													<th><input type="checkbox"></th>
													<th><a href="#" data-attribute="filename">File Name</a> <span class="glyphicon glyphicon-sort-by-alphabet"></span></th>
													<th><a href="#" data-attribute="size">Size</a> <span></span></th>
													<th><a href="#" data-attribute="last-modified">Last modified</a> <span></span></th>
												</tr>
											</thead>
											<tbody>
												<!-- see JS -->
											</tbody>
										</table>

										<div class="row visible-xs visible-sm">
											<div class="col-md-12 text-center hidden online-control">
												<button class="btn btn-info btn-upload" title="Upload one or more files to the /sys or /www directory (drag&amp;drop is supported as well)" data-type="generic" data-style="btn-info"><span class="glyphicon glyphicon-cloud-upload"></span> Upload File(s)</button>
											</div>
										</div>
									</div>

									<!-- Display Editor -->
									<div class="tab-pane" id="page_display">
										<ol class="breadcrumb" id="ol_display_directory">
											<li class="active"><span class="glyphicon glyphicon-folder-open"></span> Display Directory</li>
											<li class="pull-right hidden online-control"><a href="#" id="a_refresh_display"><span class="glyphicon glyphicon-refresh"></span> Refresh</a></li>
											<li class="pull-right hidden online-control"><a href="#" id="a_new_display_file"><span class="glyphicon glyphicon-file"></span> New Item</a></li>
										</ol>

										<h1 class="text-center text-muted">Connect to your Duet to show Display items</h1>

										<table class="table table-bordered table-files table-hover table-striped hidden" id="table_display_files">
											<thead>
												<tr>
													<th><input type="checkbox"></th>
													<th><a href="#" data-attribute="filename">Menu Item</a> <span class="glyphicon glyphicon-sort-by-alphabet"></span></th>
													<th><a href="#" data-attribute="size">Size</a> <span></span></th>
													<th><a href="#" data-attribute="last-modified">Last modified</a> <span></span></th>
												</tr>
											</thead>
											<tbody>
												<!-- see JS -->
											</tbody>
										</table>

										<div class="row">
											<div class="col-md-12 text-center hidden online-control">
												<button class="btn btn-info btn-upload" title="Upload one or more files to the /menu directory (drag&amp;drop is supported as well)" data-type="menu" data-style="btn-info"><span class="glyphicon glyphicon-cloud-upload"></span> Upload File(s)</button>
											</div>
										</div>
									</div>

									<!-- Machine Properties -->
									<div class="tab-pane row" id="page_machine">
										<div class="col-xs-12 col-sm-12 col-md-9 col-lg-10">
											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Drive Configuration</span>
												</div>
												<table id="table_drives" class="table table-striped">
													<thead>
														<tr>
															<th>Logical Drive</th>
															<th>Endstop hit</th>
															<th>Minimum</th>
															<th>Maximum</th>
															<th class="hidden-xs">InstantDv</th>
															<th>Max Speed</th>
															<th class="hidden-xs">Acceleration</th>
															<th class="hidden-xs hidden-sm">Motor Current</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td>X</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>Y</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>Z</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>E0</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>E1</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>E2</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>E3</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>E4</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>E5</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>E6</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>E7</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
														<tr>
															<td>E8</td>
															<td>n/a</td>
															<td>n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td>n/a</td>
															<td class="hidden-xs">n/a</td>
															<td class="hidden-xs hidden-sm">n/a</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
										<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2 col-right">
											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Z-Probe</span>
												</div>
												<div class="panel-body">
													<dl>
														<dt>Type:</dt>
														<dd id="dd_probe_type">n/a</dd>
														<dt>Trigger Height:</dt>
														<dd id="dd_probe_height">n/a</dd>
														<dt>Trigger Value:</dt>
														<dd id="dd_probe_trigger_value">n/a</dd>
														<dt>Current Value:</dt>
														<dd id="dd_probe_current_value">n/a</dd>
													</dl>
												</div>
											</div>
										</div>
										<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2 col-right pull-right">
											<div class="panel panel-default">
												<div class="panel-heading">
													<span>Other</span>
												</div>
												<div class="panel-body">
													<dl>
														<dt>Geometry:</dt>
														<dd id="dd_geometry">n/a</dd>
														<dt>Motor Idle Current Factor:</dt>
														<dd id="dd_idle_current">n/a</dd>
														<dt>Motor Idle Timeout:</dt>
														<dd id="dd_idle_timeout">n/a</dd>
													</dl>

													<button id="btn_fw_diagnostics" type="button" class="btn btn-info machine-button"><span class="glyphicon glyphicon-dashboard"></span> Firmware Diagnostics</button>
												</div>
											</div>
										</div>
									</div>

									<!-- Tools -->
									<div class="tab-pane row" id="page_tools">
										<div class="col-md-12">
											<div id="div_add_tool" class="panel panel-default">
												<div class="panel-heading">
													<span>Define new Tool</span>
												</div>
												<div class="panel-body">
													<div class="row">
														<div class="col-lg-1 col-md-6 col-sm-6">
															<label for="input_tool_number">Number:</label>
															<input type="number" min="0" max="255" value="127" class="form-control" id="input_tool_number" disabled>
														</div>

														<div class="col-lg-1 col-md-6 col-sm-6">
															<label for="input_tool_name">Name:</label>
															<input type="text" value="" placeholder="optional" class="form-control" id="input_tool_name" disabled>
														</div>

														<div class="col-lg-4 col-md-6 col-sm-6">
															<label>Associated Heater(s):</label>
															<div class="btn-group btn-group-justified" data-toggle="buttons" id="check_heaters">
																<label class="btn btn-default disabled" title="Heater 0">
																	<input type="checkbox" name="tool_heaters" value="0" disabled> 0
																</label>
																<label class="btn btn-primary active disabled" title="Heater 1">
																	<input type="checkbox" name="tool_heaters" value="1" checked disabled> 1
																</label>
																<label class="btn btn-default disabled" title="Heater 2">
																	<input type="checkbox" name="tool_heaters" value="2" disabled> 2
																</label>
																<label class="btn btn-default disabled" title="Heater 3">
																	<input type="checkbox" name="tool_heaters" value="3" disabled> 3
																</label>
																<label class="btn btn-default disabled" title="Heater 4">
																	<input type="checkbox" name="tool_heaters" value="4" disabled> 4
																</label>
																<label class="btn btn-default disabled" title="Heater 5">
																	<input type="checkbox" name="tool_heaters" value="5" disabled> 5
																</label>
																<label class="btn btn-default disabled" title="Heater 6">
																	<input type="checkbox" name="tool_heaters" value="6" disabled> 6
																</label>
																<label class="btn btn-default disabled duet-ng hidden" title="Heater 7">
																	<input type="checkbox" name="tool_heaters" value="7" disabled> 7
																</label>
															</div>
														</div>

														<div class="col-lg-4 col-md-6 col-sm-6">
															<label>Associated Drive(s):</label>
															<div class="btn-group btn-group-justified" data-toggle="buttons" id="check_drives">
																<label class="btn btn-primary active disabled" title="Extruder 0">
																	<input type="checkbox" name="tool_drives" value="0" checked disabled> 0
																</label>
																<label class="btn btn-default disabled" title="Extruder 1">
																	<input type="checkbox" name="tool_drives" value="1" disabled> 1
																</label>
																<label class="btn btn-default disabled" title="Extruder 2">
																	<input type="checkbox" name="tool_drives" value="2" disabled> 2
																</label>
																<label class="btn btn-default disabled" title="Extruder 3">
																	<input type="checkbox" name="tool_drives" value="3" disabled> 3
																</label>
																<label class="btn btn-default disabled" title="Extruder 4">
																	<input type="checkbox" name="tool_drives" value="4" disabled> 4
																</label>
																<label class="btn btn-default disabled" title="Extruder 5">
																	<input type="checkbox" name="tool_drives" value="5" disabled> 5
																</label>
																<label class="btn btn-default disabled duet-ng hidden" title="Extruder 6">
																	<input type="checkbox" name="tool_drives" value="6" disabled> 6
																</label>
																<label class="btn btn-default disabled duet-ng hidden" title="Extruder 7">
																	<input type="checkbox" name="tool_drives" value="7" disabled> 7
																</label>
																<label class="btn btn-default disabled duet-ng hidden" title="Extruder 8">
																	<input type="checkbox" name="tool_drives" value="8" disabled> 8
																</label>
															</div>
														</div>

														<div class="col-lg-2 col-md-12 col-sm-12">
															<button class="btn btn-success disabled" id="btn_add_tool" title="Define a new tool"><span class="glyphicon glyphicon-plus"></span> Add Tool</button>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="row" id="row_save_settings">
									<div class="col-md-12 text-center">
										<button type="button" class="btn btn-default app-control hidden hidden-xs" onClick="app.listDevices()"><span class="glyphicon glyphicon-arrow-left"></span> List available Devices</button>
										<button type="submit" class="btn btn-lg btn-primary btn-apply-settings hidden-xs hidden-sm disabled" title="Apply new settings from this page"><span class="glyphicon glyphicon-ok"></span> Apply Settings</button>
										<button class="btn btn-lg btn-warning btn-reset-settings hidden-xs hidden-sm disabled" title="Overwrite all saved settings with default values"><span class="glyphicon glyphicon-erase"></span> Load Factory Defaults</button>
										<button type="submit" class="btn btn-primary btn-apply-settings hidden-md hidden-lg disabled" title="Apply new settings from this page"><span class="glyphicon glyphicon-ok"></span> Apply Settings</button>
										<button class="btn btn-warning btn-reset-settings hidden-md hidden-lg disabled" title="Overwrite all saved settings with default values"><span class="glyphicon glyphicon-erase"></span> Load Factory Defaults</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>

				<!-- Sidebar Overlay -->
				<div class="row">
					<div id="div_sidebar_overlay" class="hidden-xs hidden-sm col-md-2 col-lg-2">
						<div class="well"></div>
					</div>
				</div>
			</div>
		</main>

		<!-- Modal dialogs -->
		<div id="modal_host_input" class="modal fade" data-backdrop="static">
			<div class="modal-dialog modal-md">
				<div class="modal-content">
					<form id="form_host">
						<div class="modal-header">
							<h4 class="modal-title">Connect to Board</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label for="input_host">Please enter the address of your board:</label>
								<input type="text" class="form-control" id="input_host">
							</div>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> Connect</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div id="modal_pass_input" class="modal fade" data-backdrop="static">
			<div class="modal-dialog modal-md">
				<div class="modal-content">
					<form id="form_password">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title">Password required</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label for="input_password">Please enter your password:</label>
								<input type="password" class="form-control" id="input_password">
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
							<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-remove"></span> Verify</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div id="modal_reconnecting" class="modal fade" data-backdrop="static">
			<div class="modal-dialog modal-md">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal=title"><span class="glyphicon glyphicon-exclamation-sign"></span> <span id="span_reconnect_title">Connection Lost</span></h4>
					</div>
					<div class="modal-body">
						<p>The connection between the browser and your machine has been interrupted.</p>
						<p><span>Reason:</span> <span id="span_reconnect_reason">Unknown</span></p>
						<p>Please wait while a new connection is being established...</p>
					</div>
				</div>
			</div>
		</div>

		<div id="modal_change_filament" class="modal fade">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
						<h4 class="modal-title">Change Filament</h4>
					</div>
					<div class="modal-body">
						<p>Please choose a filament for this tool:</p>
						<div id="div_filaments" class="list-group"></div>
					</div>
				</div>
			</div>
		</div>

		<div id="modal_confirmation" class="modal fade">
			<div class="modal-dialog modal-md">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
						<h4 class="modal-title"><!-- see JS--></h4>
					</div>
					<div class="modal-body">
						<p></p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-success" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span> Yes</button>
						<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
					</div>
				</div>
			</div>
		</div>

		<div id="modal_textinput" class="modal fade">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<form>
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title"><!-- see JS--></h4>
						</div>
						<div class="modal-body">
							<p></p>
							<div class="input-group">
								<input type="text" class="form-control">
							</div>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> OK</button>
							<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div id="modal_change_step" class="modal fade">
			<div class="modal-dialog modal-md">
				<div class="modal-content">
					<form>
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title">Change Step Size</h4>
						</div>
						<div class="modal-body">
							<p>Please enter a new value for the right-clicked button:</p>
							<div class="input-group">
								<input id="input_step_amount" type="number" min="0.00001" step="any" required="required" class="form-control">
								<span id="input_step_amount_unit" class="input-group-addon">mm</span>
							</div>
							<p>Be aware that this change will not be saved permanently unless you save the settings again on the Settings page.</p>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> OK</button>
							<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<input id="input_file_upload" class="hidden" type="file" multiple>
		<div id="modal_upload" class="modal fade" data-backdrop="static">
			<div class="modal-dialog modal-md">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close hidden" data-dismiss="modal"><span>&times;</span></button>
						<h4 class="modal-title"><!-- see JS --></h4>
					</div>
					<div class="modal-body">
						<p>Please wait while the following files are being uploaded:</p>
						<table id="table_upload_files">
							<thead>
								<tr>
									<th>Filename</th>
									<th>Size</th>
									<th>Progress</th>
								</tr>
							</thead>
							<tbody>
								<!-- see JS -->
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" id="btn_cancel_upload"><span class="glyphicon glyphicon-remove"></span> Cancel Upload(s)</button>
						<button type="button" class="btn btn-success hidden" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span> Close</button>
					</div>
				</div>
			</div>
		</div>

		<div id="modal_edit" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
						<h4 class="modal-title"><!-- see JS --></h4>
					</div>
					<div class="modal-body">
						<textarea id="text_edit"></textarea>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
						<button type="button" class="btn btn-success" id="btn_save_file"><span class="glyphicon glyphicon-ok"></span> Save Changes</button>
					</div>
				</div>
			</div>
		</div>

		<div id="modal_bed" class="modal fade">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
						<h4 class="modal-title">Automatic Calibration Results</h4>
					</div>
					<div class="modal-body">
						<div class="row">
							<div id="div_visualization_placeholder" class="col-md-12 text-center">
								<div>
									<h3>loading...</h3>
								</div>
							</div>
							<div id="div_visualization" class="col-xs-10 col-sm-10 col-md-11 hidden">
								<!-- see JS -->
							</div>
							<div id="div_legend" class="col-xs-2 col-sm-2 col-md-1 hidden">
								<canvas id="canvas_legend"></canvas>
							</div>
						</div>

						<div id="row_stats" class="row">
							<div class="hidden-xs hidden-sm col-md-3">
								<p>Number of probe points: <span id="num_probe_points">n/a</span></p>
								<p class="hidden delta">Probing radius: <span id="probing_radius">n/a</span></p>
							</div>

							<div class="col-xs-6 col-sm-6 col-md-4">
								<p>Probe area: <span id="probe_area">n/a</span></p>
								<p>Maximum deviations: <span id="max_deviations">n/a</span></p>
							</div>

							<div class="col-xs-6 col-sm-6 col-md-3">
								<p>Mean error: <span id="mean_error">n/a</span></p>
								<p>RMS error: <span id="rms_error">n/a</span></p>
							</div>
							<div class="hidden-xs hidden-sm col-md-2">
								<button class="btn btn-primary pull-right" id="btn_top_view"><span class="glyphicon glyphicon-eye-open"></span> Top View</button>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-info pull-left" data-toggle="popover" data-placement="top" data-trigger="focus" data-content="Click and hold the left mouse button for orbit controls and press and hold the right mouse button to pan around. Use the mouse wheel to zoom in and out."><span class="glyphicon glyphicon-question-sign"></span> Help</button>

						<div class="dropup pull-left">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
								<span class="glyphicon glyphicon-cog"></span> Options <span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li class="dropdown-header">Heightmap Colors</li>
								<li><a href="#" class="color-scheme" data-scheme="terrain">Terrain (Default)</a></li>
								<li><a href="#" class="color-scheme" data-scheme="heat">Heat</a></li>
							</ul>
						</div>

						<button type="button" class="btn btn-success" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span> Close</button>
					</div>
				</div>
			</div>
		</div>

		<div id="modal_backdrop" class="modal fade" data-backdrop="static"></div>

		<div id="modal_scanner" class="modal fade" data-backdrop="static">
			<div class="modal-dialog modal-md">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">Scanning...</h4>
					</div>
					<div class="modal-body">
						<h4>Scan Progress</h4>
						<div class="progress">
							<div id="progress_scan" class="progress-bar progress-bar-success progress-bar-striped">
								<span id="span_scan_progress">0%</span>
							</div>
						</div>

						<h4 class="diabase hidden">Post-Processing Progress</h4>
						<div class="progress diabase hidden">
							<div id="progress_scan_postprocessing" class="progress-bar progress-bar-warning progress-bar-striped">
								<span id="span_scan_postprocessing_progress">0%</span>
							</div>
						</div>

						<h4>Upload Progress</h4>
						<div class="progress">
							<div id="progress_scan_upload" class="progress-bar progress-bar-info progress-bar-striped">
								<span id="span_scan_upload_progress">0%</span>
							</div>
						</div>

						<p id="p_scan_info">Please wait while a scan is being made. This may take a while...</p>
					</div>
					<div class="modal-footer">
						<button id="btn_cancel_scan" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
						<button id="btn_close_scan" class="btn btn-success hidden" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span> Close</button>
					</div>
				</div>
			</div>
		</div>

		<div id="modal_scanner_calibration" class="modal fade" data-backdrop="static">
			<div class="modal-dialog modal-md">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">Calibrating...</h4>
					</div>
					<div class="modal-body">
						<h4>Calibration Progress</h4>
						<div class="progress">
							<div id="progress_calibration" class="progress-bar progress-bar-success progress-bar-striped">
								<span id="span_calibration_progress">0%</span>
							</div>
						</div>

						<p>Please wait while the scanner is being calibrated. This may take a while...</p>
					</div>
					<div class="modal-footer">
						<button id="btn_cancel_calibration" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
					</div>
				</div>
			</div>
		</div>

		<div id="modal_calibrate" class="modal fade">
			<div class="modal-dialog modal-md">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">Calibrate Scanner</h4>
					</div>
					<div class="modal-body">
						<p>In what mode would you like to run the calibration?</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
						<button type="button" id="btn_calibrate_linear" class="btn btn-success"><span class="glyphicon glyphicon-resize-full"></span> Linear</button>
						<button type="button" id="btn_calibrate_rotary" class="btn btn-success"><span class="glyphicon glyphicon-repeat"></span> Rotary</button>
					</div>
				</div>
			</div>
		</div>

		<div id="modal_start_scan" class="modal fade">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<form>
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title">Start 3D Scan</h4>
						</div>
						<div class="modal-body">
							<h4>1. Enter a filename for your scan</h4>
							<div class="description">
								<input type="text" required="required" placeholder="Choose a filename..." id="input_scan_filename" class="form-control">
							</div>

							<h4>2. Specify scan details</h4>
							<div class="description">
								<div class="row">
									<div class="col-md-4">
										<label for="input_scan_range">Scan range:</label>
										<div class="input-group">
											<input type="number" required="required" min="0" max="360" step="1" value="360" id="input_scan_range" class="form-control">
											<span class="input-group-addon scan-unit">mm</span>
										</div>
									</div>
									<div class="col-md-4">
										<label for="input_scan_resolution">Step size:</label>
										<div class="input-group">
											<input type="number" required="required" min="0" max="10" step="1" value="1" id="input_scan_resolution" class="form-control">
											<span class="input-group-addon scan-unit">mm</span>
										</div>
									</div>
									<div class="col-md-4">
										<label>Mode:</label>
										<div class="btn-group btn-group-justified" data-toggle="buttons">
											<div class="btn-group">
												<label class="btn btn-default active">
													<input type="radio" name="scanMode" value="0" checked>Linear
												</label>
											</div>
											<div class="btn-group">
												<label class="btn btn-default">
													<input type="radio" name="scanMode" value="1">Rotary
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>

							<h4>3. Check alignment</h4>
							<div class="description">
								<p>In order to align your object you can toggle the right laser before you start:</p>
								<button id="btn_toggle_laser" class="btn btn-info"><span class="glyphicon glyphicon-certificate"></span> <span class="content">Activate Laser</span></button>
							</div>

							<h4>4. Move the object to the center</h4>
							<div class="description scan-move-controls">
								<div class="btn-group btn-group-justified">
									<div class="btn-group visible-xl">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="-100"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-100</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="-50"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-50</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="-10"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-10</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="-1"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-1</span></button>
									</div>
									<div class="btn-group visible-lg">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="-0.1"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-0.1</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default disabled msgbox-x">X = n/a</button>
									</div>
									<div class="btn-group visible-lg">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="0.1"><span>+0.1</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="1"><span>+1</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="10"><span>+10</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="50"><span>+50</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group visible-xl">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="100"><span>+100</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
								</div>

								<div class="btn-group btn-group-justified">
									<div class="btn-group visible-xl">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="-100"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-100</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="-50"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-50</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="-10"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-10</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="-1"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-1</span></button>
									</div>
									<div class="btn-group visible-lg">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="-0.1"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-0.1</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default disabled msgbox-y">Y = n/a</button>
									</div>
									<div class="btn-group visible-lg">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="0.1"><span>+0.1</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="1"><span>+1</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="10"><span>+10</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="50"><span>+50</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group visible-xl">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="100"><span>+100</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
								</div>

								<div class="btn-group btn-group-justified">
									<div class="btn-group visible-xl">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="-50"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-50</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="-25"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-25</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="-5"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-5</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="-0.5"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-0.5</span></button>
									</div>
									<div class="btn-group visible-lg">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="-0.05"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-0.05</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default disabled msgbox-z">Z = n/a</button>
									</div>
									<div class="btn-group visible-lg">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="0.05"><span>+0.05</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="0.5"><span>+0.5</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="5"><span>+5</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="25"><span>+25</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group visible-xl">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="50"><span>+50</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
								</div>

								<div class="btn-group btn-group-justified">
									<div class="btn-group visible-xl">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="A" data-amount="-100"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-100</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="A" data-amount="-50"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-50</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="A" data-amount="-10"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-10</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="A" data-amount="-1"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-1</span></button>
									</div>
									<div class="btn-group visible-lg">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="A" data-amount="-0.1"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-0.1</span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default disabled msgbox-a">A = n/a</button>
									</div>
									<div class="btn-group visible-lg">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="A" data-amount="0.1"><span>+0.1</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="A" data-amount="1"><span>+1</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="A" data-amount="10"><span>+10</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="A" data-amount="50"><span>+50</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
									<div class="btn-group visible-xl">
										<button type="button" class="btn btn-default btn-move" data-axis-letter="A" data-amount="100"><span>+100</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
							<button type="submit" id="btn_start_scan_modal" class="btn btn-success disabled"><span class="glyphicon glyphicon-ok"></span> Start Scan</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div id="modal_messagebox" class="modal fade">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
						<h4 id="h4_messagebox_title" class="modal-title"><!-- see JS --></h4>
					</div>
					<div class="modal-body">
						<h3 id="h3_messagebox"><!-- see JS --></h3>

						<div id="div_x_controls">
							<label>Use the following controls to adjust X:</label>
							<br/>
							<div class="btn-group btn-group-justified">
								<div class="btn-group visible-xl">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="-100"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-100</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="-50"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-50</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="-10"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-10</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="-1"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-1</span></button>
								</div>
								<div class="btn-group visible-lg">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="-0.1"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-0.1</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default disabled msgbox-x">X = n/a</button>
								</div>
								<div class="btn-group visible-lg">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="0.1"><span>+0.1</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="1"><span>+1</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="10"><span>+10</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="50"><span>+50</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group visible-xl">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="X" data-amount="100"><span>+100</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
							</div>
						</div>
						<div id="div_y_controls">
							<label>Use the following controls to adjust Y:</label>
							<br/>
							<div class="btn-group btn-group-justified">
								<div class="btn-group visible-xl">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="-100"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-100</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="-50"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-50</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="-10"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-10</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="-1"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-1</span></button>
								</div>
								<div class="btn-group visible-lg">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="-0.1"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-0.1</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default disabled msgbox-y">Y = n/a</button>
								</div>
								<div class="btn-group visible-lg">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="0.1"><span>+0.1</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="1"><span>+1</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="10"><span>+10</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="50"><span>+50</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group visible-xl">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Y" data-amount="100"><span>+100</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
							</div>
						</div>
						<div id="div_z_controls">
							<label>Use the following controls to adjust Z:</label>
							<br/>
							<div class="btn-group btn-group-justified">
								<div class="btn-group visible-xl">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="-50"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-50</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="-25"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-25</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="-5"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-5</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="-0.5"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-0.5</span></button>
								</div>
								<div class="btn-group visible-lg">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="-0.05"><span class="glyphicon glyphicon-chevron-left hidden-xs"></span> <span>-0.05</span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default disabled msgbox-z">Z = n/a</button>
								</div>
								<div class="btn-group visible-lg">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="0.05"><span>+0.05</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="0.5"><span>+0.5</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="5"><span>+5</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="25"><span>+25</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
								<div class="btn-group visible-xl">
									<button type="button" class="btn btn-default btn-move" data-axis-letter="Z" data-amount="50"><span>+50</span> <span class="glyphicon glyphicon-chevron-right hidden-xs"></span></button>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" id="btn_ack_messagebox" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> OK</button>
						<button type="button" id="btn_cancel_messagebox" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
						<button type="button" class="btn btn-success" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span> Close</button>
					</div>
				</div>
			</div>
		</div>

		<div id="modal_define_mesh" class="modal fade">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<form>
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title">Define Area for Mesh Grid Compensation</h4>
						</div>
						<div class="modal-body">
							<div id="div_mesh_x" class="row">
								<div class="col-md-4">
									<label for="input_mesh_x_min">Start coordinate in X direction:</label>
									<div class="input-group">
										<input type="number" required="required" step="any" value="0" id="input_mesh_x_min" class="form-control">
										<span class="input-group-addon">mm</span>
									</div>
								</div>
								<div class="col-md-4">
									<label for="input_mesh_x_max">End coordinate in X direction:</label>
									<div class="input-group">
										<input type="number" required="required" step="any" value="180" id="input_mesh_x_max" class="form-control">
										<span class="input-group-addon">mm</span>
									</div>
								</div>
								<div class="col-md-4">
									<label for="input_mesh_x_spacing">Spacing in X direction:</label>
									<div class="input-group">
										<input type="number" required="required" min="0" step="any" value="20" id="input_mesh_x_spacing" class="form-control">
										<span class="input-group-addon">mm</span>
									</div>
								</div>
							</div>
							<div id="div_mesh_y" class="row">
								<div class="col-md-4">
									<label for="input_mesh_y_min">Start coordinate in Y direction:</label>
									<div class="input-group">
										<input type="number" required="required" step="any" value="0" id="input_mesh_y_min" class="form-control">
										<span class="input-group-addon">mm</span>
									</div>
								</div>
								<div class="col-md-4">
									<label for="input_mesh_y_max">End coordinate in Y direction:</label>
									<div class="input-group">
										<input type="number" required="required" step="any" value="180" id="input_mesh_y_max" class="form-control">
										<span class="input-group-addon">mm</span>
									</div>
								</div>
								<div class="col-md-4">
									<label for="input_mesh_y_spacing">Spacing in Y direction:</label>
									<div class="input-group">
										<input type="number" required="required" min="0" step="any" value="20" id="input_mesh_y_spacing" class="form-control">
										<span class="input-group-addon">mm</span>
									</div>
								</div>
							</div>
							<div id="div_mesh_delta" class="row hidden">
								<div class="col-md-6">
									<label for="input_mesh_radius">Mesh radius:</label>
									<div class="input-group">
										<input type="number" required="required" min="0" step="any" value="150" id="input_mesh_radius" class="form-control">
										<span class="input-group-addon">mm</span>
									</div>
								</div>
								<div class="col-md-6">
									<label for="input_mesh_spacing">Mesh spacing:</label>
									<div class="input-group">
										<input type="number" required="required" min="0" step="any" value="20" id="input_mesh_spacing" class="form-control">
										<span class="input-group-addon">mm</span>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
							<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> OK</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div id="modal_cylinder" class="modal fade">
			<div class="modal-dialog modal-md">
				<div class="modal-content">
					<form>
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title">Probe Cylinder for Rotary Printing</h4>
						</div>
						<div class="modal-body">
							<label for="input_cylinder_diameter">Please enter the diameter of the cylinder to probe:</label>
							<div class="input-group">
								<input id="input_cylinder_diameter" required="required" min="1" value="25" class="form-control">
								<span class="input-group-addon">mm</span>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
							<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> OK</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<ul id="ul_file_contextmenu" class="dropdown-menu">
			<li class="gcode-action single file"><a tabindex="-1" href="#" id="a_context_start"><span class="glyphicon glyphicon-play"></span> Start File</a></li>
			<li class="gcode-action single file"><a tabindex="-1" href="#" id="a_context_simulate"><span class="glyphicon glyphicon-forward"></span> Simulate File</a></li>
			<li class="macro-action single file"><a tabindex="-1" href="#" id="a_context_run"><span class="glyphicon glyphicon-play"></span> Run Macro</a></li>
			<li class="filament-action single"><a tabindex="-1" href="#" id="a_context_edit_load"><span class="glyphicon glyphicon-arrow-down"></span> Edit Load Macro</a></li>
			<li class="filament-action single"><a tabindex="-1" href="#" id="a_context_edit_config"><span class="glyphicon glyphicon glyphicon-asterisk"></span> Edit Config Macro</a></li>
			<li class="filament-action single"><a tabindex="-1" href="#" id="a_context_edit_unload"><span class="glyphicon glyphicon-arrow-up"></span> Edit Unload Macro</a></li>
			<li class="single file"><a tabindex="-1" href="#" id="a_context_view_heightmap"><span class="glyphicon glyphicon-eye-open"></span> View Heightmap</a></li>
			<li class="single file"><a tabindex="-1" href="#" id="a_context_download_file"><span class="glyphicon glyphicon-download-alt"></span> Download</a></li>
			<li class="multi file"><a tabindex="-1" href="#" id="a_context_download_zip"><span class="glyphicon glyphicon-compressed"></span> Download as ZIP</a></li>
			<li class="divider"></li>
			<li class="single file"><a tabindex="-1" href="#" id="a_context_edit"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
			<li class="single"><a tabindex="-1" href="#" id="a_context_rename"><span class="glyphicon glyphicon-text-size"></span> Rename</a></li>
			<li><a tabindex="-1" href="#" id="a_context_delete"><span class="glyphicon glyphicon-remove"></span> Delete</a></li>
		</ul>

		<div id="layer_tooltip" class="well well-sm"></div>
		<!-- Bootstrap core JavaScript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="js/3rd-party/jquery-3.1.0.js"></script>
		<script src="js/3rd-party/jquery.flot.js"></script>
		<script src="js/3rd-party/jquery.flot.dashes.js"></script>
		<script src="js/3rd-party/jquery.flot.resize.js"></script>
		<script src="js/3rd-party/jquery.flot.navigate.js"></script>
		<script src="js/3rd-party/bootstrap.js"></script>
		<script src="js/3rd-party/bootstrap-notify.js"></script>
		<script src="js/3rd-party/bootstrap-slider.js"></script>
		<script src="js/3rd-party/bootstrap3-typeahead.js"></script>
		<script src="js/3rd-party/jszip.js"></script>
		<script src="js/3rd-party/FileSaver.js"></script>
		<script src="js/3rd-party/piecon.js"></script>
		<script src="js/3rd-party/slideout.js"></script>
		<script src="js/3rd-party/three.js"></script>
		<script src="js/3rd-party/three.orbit.js"></script>
		<script src="js/charts.js"></script>
		<script src="js/comm.js"></script>
		<script src="js/files.js"></script>
		<script src="js/i18n.js"></script>
		<script src="js/interface.js"></script>
		<script src="js/modals.js"></script>
		<script src="js/notify.js"></script>
		<script src="js/settings.js"></script>
		<script src="js/sliders.js"></script>
		<script src="js/upload.js"></script>
		<script src="js/utils.js"></script>
		<script src="js/3d.js"></script>
	</body>
</html>
